日期和时间（两个字段）转换为 UTC

Question

I have two fields:

• Date
• Time

and I have managed to show/display dates in user's time zone, but store data in UTC (in state) because I want to send API request and store all times in UTC.

However, I have a problem when I select:

• 7th September 2020
• 00:30

This means that I need to set 6th September 22:30 (if we assume that my time zone is Europe/Berlin.

This is how I display date:

    const date = moment.utc(selected).tz(localStorage.getItem('format_timezone')).format('YYYY-MM-DD');
    const newSelected = selected ? new Date(date) : '';

and this is how I display time:

 const date = moment.utc().format('YYYY/MM/DD');
    const time = moment.utc(`${date} ${selected}`).tz(localStorage.getItem('format_timezone')).format('YYYY/MM/DD HH:mm:ss');
    const newSelected = selected ? new Date(time) : '';

and this is how I handle input change:

handleDateInput(e) {
        const { setCampaignInputs } = this.props;
        setCampaignInputs('date_input', moment(e).format(convertToMoment('Y-m-d')));
    }

    handleTimeInput(e) {
        const { setCampaignInputs } = this.props;
        setCampaignInputs('time_input', moment.utc(e).format(convertToMoment('H:i:s')));
    }

Any tips how to handle this if I store data in two field? It would be easy if I store data in one input field...

Thanks!

Answer 1

The best way to deal with date/time in javascript is by using epochMilli. From epochMilli to date using new Date(epochMilli) whatever timezone the browsers are. And From Date to epochMilli is by using getTime() method.

Answer 2

How about this:

On user-input you'll have the inputDate and inputTime strings. That same string can be utilized to generate the state value and also the display value (which will be rendered from state)

 const inputDate = '2020-01-01' const inputTime = '00:30' const stateValue = moment(`${inputDate} ${inputTime}`) .utc() .format('YYYY-MM-DD HH:mm') const displayDateTime = moment(`${stateValue}Z`) .format('YYYY-MM-DD HH:mm') const displayDate = moment(`${stateValue}Z`).format('YYYY-MM-DD') const displayTime = moment(`${stateValue}Z`).format('HH:mm'); console.log('state-value : ', stateValue) // state value console.log('display-date-time : ', displayDateTime) // date-time display value console.log('display-date : ', displayDate) // date display value console.log('display-time : ', displayTime) // time display value

 <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.28.0/moment.min.js"></script>

Good Luck...