Charlicus / react-semantic-datetime

Implementation of a datetime picker for react using pure semantic components and momentjs locals capabilities
21 stars 3 forks source link

Is there a possibility to use 24H time format instead of AM/PM #7

Open chemic opened 6 years ago

chemic commented 6 years ago

1st, thanks a lot for that awesome extension for long missed semantic-ui component 👍 I have one question, is there a possibility to use 24H time format for picking time instead of AM/PM?

Thanks!

kevinpiske commented 6 years ago

Chemic, I use the moment with locale pt-BR and by default comes the 24h time format.

chemic commented 6 years ago

datepicker-ampm

For some reason changing locale with moment.locale('et'); gives no effect in date picker, it does change all my other moment related date-time stuff on the app.

kevinpiske commented 6 years ago

I don't remember why, if it's some momentjs bug, but I had to import the locale. Just import.

I include in index.js: import localization from 'moment/locale/pt-br';

Charlicus commented 6 years ago

@chemic Thanks for your message, @kevinpiske thks for the support, I'll also have a look !

Charlicus commented 6 years ago

@chemic , I have been able to reproduce the issue when loading index.html from my computer directly in the browser.

When I run the calendar from a full react app running on a nodejs server, I don't have the issue...

It seems that moment.locale('XXX') is not persistent in the first case

chemic commented 6 years ago

@Charlicus, I'm running it in the full react app with nodejs server as well 😄 I wrapped DatetimePicker into my own component like that tho.

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import moment from 'moment';
import DatetimePicker from 'react-semantic-datetime';

moment.locale('en-gb');

class DatePicker extends Component {
    render() {
        const { currentDate, name, dateChanged } = this.props;

        return (
            <DatetimePicker
                color="grey"
                onChange={(value)=>{
                    dateChanged(name, value);
                }} // Mandatory
                value={moment(currentDate)} // Mandatory
                time={true}// optional to show time selection, just a date picket if false (default:true)
            />
        );
    }
}

DatePicker.propTypes = {
    currentDate: PropTypes.instanceOf(Date),
    name: PropTypes.string.isRequired,
    dateChanged: PropTypes.func.isRequired
};

export default DatePicker;