Timezones
The date picker works with local times by default, but ships with support for changing the timezone. The conversions and correct output relies on either of these three external libraries: luxon, moment-timezone and day.js. For installing and using these libraries check out this guide.
There are two angles regarding timezones:
dataTimezone- the datepicker expects this format and returns this format. It is'local'by default if the date-times don't contain any timezone informationdisplayTimezone- the datepicker displays everything in this timezone. The date-times will be converted from thedataTimezoneand displayed accordingly. It is'local'by default
Invalid date-times will be interpreted in dataTimezone when they contain no timezone info and will be shown in displayTimezone on the wheels.
Demo
Data timezone is
Display timezone is
The local timezone your browser is in:
import { dayjsTimezone } from '@mobiscroll/react';
import dayjs from 'dayjs';
import timezone from 'dayjs/plugin/timezone';
import utc from 'dayjs/plugin/utc';
// Extend Day.js with UTC and timezone plugins
dayjs.extend(utc);
dayjs.extend(timezone);
// Setup Mobiscroll Day.js plugin
dayjsTimezone.dayjs = dayjs;
function App() {
const [selected, setSelected] = useState(null);
const selectedChange = (ev) => {
setSelected(ev.value);
}
return <Datepicker
value={selected}
onChange={selectedChange}
dataTimezone='utc'
displayTimezone='local '
timezonePlugin={dayjsTimezone}
controls={['datetime']}
/>
}
Selected date & time is returned in "Data timezone"
import { Datepicker, dayjsTimezone, setOptions } from '@mobiscroll/react';
import dayjs from 'dayjs';
import timezone from 'dayjs/plugin/timezone';
import utc from 'dayjs/plugin/utc';
import { useCallback, useState } from 'react';
dayjs.extend(utc);
dayjs.extend(timezone);
dayjsTimezone.dayjs = dayjs;
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
function App() {
const [selected, setSelected] = useState(null);
const handleChange = useCallback((ev) => {
setSelected(ev.value);
}, []);
return (
<Datepicker
controls={['datetime']}
value={selected}
onChange={handleChange}
dataTimezone="utc"
displayTimezone="local"
inputStyle="outline"
label="Pick date & time"
labelStyle="stacked"
timezonePlugin={dayjsTimezone}
/>
);
}
export default App;
import { Datepicker, dayjsTimezone, MbscDatepickerChangeEvent, setOptions } from '@mobiscroll/react';
import dayjs from 'dayjs';
import timezone from 'dayjs/plugin/timezone';
import utc from 'dayjs/plugin/utc';
import { FC, useCallback, useState } from 'react';
dayjs.extend(utc);
dayjs.extend(timezone);
dayjsTimezone.dayjs = dayjs;
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
const App: FC = () => {
const [selected, setSelected] = useState<string | null>(null);
const handleChange = useCallback((ev: MbscDatepickerChangeEvent) => {
setSelected(ev.value as string);
}, []);
return (
<Datepicker
controls={['datetime']}
value={selected}
onChange={handleChange}
dataTimezone="utc"
displayTimezone="local"
inputStyle="outline"
label="Pick date & time"
labelStyle="stacked"
timezonePlugin={dayjsTimezone}
/>
);
};
export default App;