---
title: "React Date & Time Timezones Example | Mobiscroll"
component: "Date & Time"
framework: "React"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/react/datetime/setting-the-picker-timezone"
---

# Timezones - React Date & Time demo

React date time picker with multiple timezone support. Make selection in one TZ and return value in a different TZ. For React and Next.JS.

- [Live demo](https://demo.mobiscroll.com/react/datetime/setting-the-picker-timezone)
- [View React JS code on GitHub](https://github.com/acidb/mobiscroll-demos-react/tree/main/src/demos/datepicker/datetime/setting-the-picker-timezone)
- [View React TS code on GitHub](https://github.com/acidb/mobiscroll-demos-react-ts/tree/main/src/demos/datepicker/datetime/setting-the-picker-timezone)
- This demo in other frameworks: [JavaScript](https://demo.mobiscroll.com/javascript/datetime/setting-the-picker-timezone.md), [jQuery](https://demo.mobiscroll.com/jquery/datetime/setting-the-picker-timezone.md), [Angular](https://demo.mobiscroll.com/angular/datetime/setting-the-picker-timezone.md), [Vue](https://demo.mobiscroll.com/vue/datetime/setting-the-picker-timezone.md)

## Description

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](https://moment.github.io/luxon/), [moment-timezone](https://momentjs.com/timezone/) and [day.js](https://day.js.org/). For installing and using these libraries [check out this guide](https://mobiscroll.com/docs/react/datepicker/timezones#library-install).

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 information
- `displayTimezone` - the datepicker displays everything in this timezone. The date-times will be converted from the `dataTimezone` and displayed accordingly. It is `'local'` by default

[Invalid date-times](https://demo.mobiscroll.com/react/datetime/disabled-invalid-values) will be interpreted in `dataTimezone` when they contain no timezone info and will be shown in `displayTimezone` on the wheels.

## What this demo shows

- Configure the timezone used for date and time selection and display.
- **Date and time picker** The example opens the picker when the user focuses or clicks the input.
- **Input behavior** The picker opens at the bottom of the container over a darkened backdrop. Clicking outside the picker closes it.
- **Date and time selection** Separate scrollable wheels for the date, hour, minute, and AM/PM. The current date is labeled `Today`, while other dates use an abbreviated day, month, and date format.
- **Scrolling behavior** Users can scroll vertically through neighboring values to move between dates, including dates in other months or years.
- **Footer actions** In the input-based examples, the gray `Cancel` button discards the change, while the blue `Set` button confirms the selected date.
- **Input value** In the input-based examples, confirming a date with `Set` displays the selected value in the input using a month, day, and year format.
- **Data timezone** View the calendar's data timezone, shown as UTC in a non-editable field labeled `Date timezone is:` next to the calendar on the left.
- **Display timezone** Use the selectable field labeled `Display timezone is:` below the data timezone field to open a timezone picker.
- **Timezone conversion** Select a different display timezone to update the date and time shown by the picker.

## Best for

- **Travel booking** Let users choose dates and times in the timezone of a flight, hotel, rental, or destination.
- **Remote appointments** Display appointment times in each participant's local timezone while keeping the underlying date-time values in a consistent data timezone.
- **International scheduling** Support date and time selection for meetings, interviews, or services involving users in different regions.
- **Location-based services** Show reservation, pickup, delivery, or check-in times in the timezone of the selected location.
- **UTC-based systems** Store and return date-time values in UTC while presenting them in a user-selected display timezone.

## Tutorial

- Data timezone is `UTC` Display timezone is `UTC+0 - Local`

The local timezone your browser is in: "UTC"

```jsx
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']}
    />
}
```

## API used in this demo

- [`theme`](https://mobiscroll.com/docs/react/datepicker/api#opt-theme) - option
- [`themeVariant`](https://mobiscroll.com/docs/react/datepicker/api#opt-themeVariant) - option
- [`controls`](https://mobiscroll.com/docs/react/datepicker/api#opt-controls) - option
- [`onChange`](https://mobiscroll.com/docs/react/datepicker/api#event-onChange) - event
- [`dataTimezone`](https://mobiscroll.com/docs/react/datepicker/api#opt-dataTimezone) - option
- [`displayTimezone`](https://mobiscroll.com/docs/react/datepicker/api#opt-displayTimezone) - option
- [`inputStyle`](https://mobiscroll.com/docs/react/datepicker/api#opt-inputStyle) - option
- [`labelStyle`](https://mobiscroll.com/docs/react/datepicker/api#opt-labelStyle) - option
- [`timezonePlugin`](https://mobiscroll.com/docs/react/datepicker/api#opt-timezonePlugin) - option

## Code

### JSX

```jsx
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({
  theme: 'ios',
  themeVariant: 'light'
});

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;
```

### TSX

```tsx
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({
  theme: 'ios',
  themeVariant: 'light'
});

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;
```

## Implementation notes

- Load Day.js with its `utc` and `timezone` plugins, call `dayjs.extend(utc)` and `dayjs.extend(timezone)`, then set `dayjsTimezone.dayjs = dayjs` before initializing the picker. In React/Angular/Vue, `dayjsTimezone` is imported directly from the framework package (e.g. `@mobiscroll/react`); in JS/jQuery it's `mobiscroll.dayjsTimezone`, referencing the plugins via `window.dayjs_plugin_utc`/`window.dayjs_plugin_timezone`.
- Use `controls: ['datetime']` with `timezonePlugin` set to that `dayjsTimezone` object (`timezonePlugin={dayjsTimezone}` in React/Vue, `[timezonePlugin]="myDayjsTimezone"` in Angular, `timezonePlugin: mobiscroll.dayjsTimezone` in JS/jQuery), plus `dataTimezone` (the timezone the underlying value is stored/returned in, e.g. `'utc'`) and `displayTimezone` (the timezone the picker UI shows dates/times in, e.g. `'local'` or an IANA zone string like `'America/New_York'`).
- `dataTimezone` stays fixed for the app's storage contract while `displayTimezone` can be changed per user/session.
- `displayTimezone` can be changed at runtime via `setOptions({ displayTimezone })` - accepting `'local'` or an IANA zone string (e.g. `'America/New_York'`, `'utc'`, `'Europe/London'`) - to re-render the picker's wheels in the newly selected zone without touching `dataTimezone`.
- Read the underlying (data-timezone) value from the change event: React binds `value`/`onChange` and reads `ev.value`; Angular/Vue bind via `[(ngModel)]`/`v-model`; JS/jQuery call `inst.getVal()` inside the `onChange` callback. The picker handles the conversion between the data and display timezones transparently.

## Run it in your project

1. If not signed up yet, or don't own a license, you can [start a free trial](https://mobiscroll.com/starttrial).

2. Clone the repository:

   ```
   git clone https://github.com/acidb/mobiscroll-demos-react.git
   ```

3. If not installed yet, install the Mobiscroll CLI from NPM:

   ```
   npm install -g @mobiscroll/cli
   ```

4. Config Mobiscroll - open a terminal window in the root directory and run:

   ```
   mobiscroll config react
   ```

5. Install dependencies - open a terminal window in the root directory and run:

   ```
   npm install
   ```

6. Run the project:

   ```
   npm run dev
   ```

On a trial, add `--trial` to the config command: `mobiscroll config react --trial`.

Running a demo locally requires a Mobiscroll trial or a license; setup is per framework at https://mobiscroll.com/docs/react/getting-started/installation

## Related demos

- Previous: [Setting values](https://demo.mobiscroll.com/react/datetime/setting-values-defaults.md) - React Date & time picker demo with different ways to set values and defaults. Custom buttons and presets - like Now - supported.