Datepicker range with timezone ignores initial date

Date and time pickers
1

When a Datepicker is used with a timezone, the initial date is reset. Using Mobiscroll v5.18.13.

In the example below, the initial date is set:

import { Datepicker, luxonTimezone } from '@mobiscroll/react';
import * as luxon from 'luxon';

luxonTimezone.luxon = luxon;

export const MobiscrollDemo = () => {
  const [date, setDate] = React.useState([
    '2022-09-28T05:00:00.000Z',
    '2022-09-28T06:00:00.000Z',
  ]);

  const dateChange = (args: any) => {
    console.log('dateChange.args.value: ', args.value)
    setDate(args.value);
  };

  return (
    <div>
      <Datepicker
        select="range"
        // timezonePlugin={luxonTimezone}
        // dataTimezone="utc"
        // displayTimezone="America/Los_Angeles"
        controls={['datetime']}
        touchUi={true}
        onChange={dateChange}
        value={date}
      />
    </div>
  );
};

In the example below, the initial date is changed to an empty array:

import React from 'react';
import { Datepicker, luxonTimezone } from '@mobiscroll/react';
import * as luxon from 'luxon';

luxonTimezone.luxon = luxon;

export const MobiscrollDemo = () => {
  const [date, setDate] = React.useState([
    '2022-09-28T05:00:00.000Z',
    '2022-09-28T06:00:00.000Z',
  ]);

  const dateChange = (args: any) => {
    console.log('dateChange.args.value: ', args.value)
    setDate(args.value);
  };

  return (
    <div>
      <Datepicker
        select="range"
        timezonePlugin={luxonTimezone}
        dataTimezone="utc"
        displayTimezone="America/Los_Angeles"
        controls={['datetime']}
        touchUi={true}
        onChange={dateChange}
        value={date}
      />
    </div>
  );
};
2

Hi @Maurice,

Thanks for reaching out!

I’ve tested both of the shared code versions, but for me the initial values are set correctly.

Are you facing any error message when the initial value is not set correctly? Which version of luxon are you using?

I’m asking because there is a know issue with the v5.18.3 and luxon 2+, where an error is appearing at initialization. Until this is fixed for a workaround you can set the version property of the luxonTimezone object to prevent the error:

luxonTimezone.luxon = luxon;
luxonTimezone.version = 3; // set the luxon main version

Let me know if this solves the problem for you!

1 Like