Skip to main content
Version: 5.33.0

Timezones

By default the Datepicker uses the local timezone of the browser for value selection. If you want to select a date-time in a different timezone, you will need an external library to handle the timezone conversions. There are two libraries that Mobiscroll supports: moment-timezone and luxon.

info

When using a timezone plugin with the Datepicker, the returned values are always ISO 8601 date strings, no matter what returnFormat option is used.

info

When using a timezone plugin with the Datepicker, the exclusiveEndDates options defaults to true. Learn more about exclusive end dates!

Library Install​

To setup the library, first you have to install it on your page. In this guide we'll assume you are using npm to install packages, but you can consult the installation guide on the libraries official pages (moment-timezone install page, luxon install page) for more options on how to install them.

The Moment-Timezone library​

1. To install the moment-timezone library with npm you will need to run the following commands:

npm install moment-timezone

2. After the library is installed, you will have to import it with the momentTimezone object from mobiscroll:

Moment library import
import moment from 'moment-timezone';
import { momentTimezone } from '@mobiscroll/javascript';

3. Then set the mobiscroll's reference to the imported library:

Moment library setup
import moment from 'moment-timezone';
import { momentTimezone } from '@mobiscroll/javascript';
momentTimezone.moment = moment;

4. After that, you can pass the momentTimezone object to the Datepicker's timezonePlugin option.

import { datepicker, momentTimezone } from '@mobiscroll/javascript';
import moment from 'moment-timezone';

momentTimezone.moment = moment;

datepicker('#myInput', {
  timezonePlugin: momentTimezone,
  dataTimezone: 'utc',
  displayTimezone: 'Europe/Berlin',
});

The Luxon library​

1. To install the luxon library with npm you will need to run the following commands:

npm install luxon

In case you are using typescript you can also consider installing the types, because they come separately:

npm install --save-dev @types/luxon

2. After the library is installed, you will have to import it with the luxonTimezone object from mobiscroll:

Luxon library import
import * as luxon from 'luxon';
import { luxonTimezone } from '@mobiscroll/javascript';

3. Then set the mobiscroll's reference to the imported library:

Luxon library setup
import * as luxon from 'luxon';
import { luxonTimezone } from '@mobiscroll/javascript';
luxonTimezone.luxon = luxon;

4. After that, you can pass the luxonTimezone object to the Datepicker's timezonePlugin option.

import { datepicker, luxonTimezone } from '@mobiscroll/javascript';
import * as luxon from 'luxon';
luxonTimezone.luxon = luxon;

datepicker('#myInput', {
  timezonePlugin: luxonTimezone,
  dataTimezone: 'utc',
  displayTimezone: 'Europe/Berlin',
});