---
title: "React Date & Time Date types Example | Mobiscroll"
component: "Date & Time"
framework: "React"
library_version: "6.2.0"
url: "https://demo.mobiscroll.com/react/datetime/date-object-ISO-8601-moment"
---

# Date types - React Date & Time demo

React Date picker for mobile & desktop supporting data types: javascript date object, ISO 8601 strings and moment.js objects. For React and Next.JS.

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

## Description

The date & time picker works with different date types:

- **JS date object** - a common way of passing a date is through a Date object: `new Date(1995, 11, 17, 15, 24)` (make sure to not simply pass a date string to `new Date()`)
- **ISO date string** - standardized way of passing dates: `'2008-09-15T15:53:00'` (make sure to pass it as a string)
- **Moment.js object** - a great solution that solves common date management difficulties: `moment([2018, 3, 27, 12, 15])` (make sure to have moment.js loaded)

When passing dates to the component - eg. [invalids](https://demo.mobiscroll.com/react/datetime/disabled-invalid-values), [min/max](https://demo.mobiscroll.com/react/datetime/min-max-restrictions) - you can do it in either format and the picker will automatically know what to do with it. If you want to specify how the picker should return values, you can do it in the [`returnFormat`](https://mobiscroll.com/docs/react/datepicker/api#opt-returnFormat) option.

## What this demo shows

- An inline date picker for selecting a date from a wheel-style date picker.
- **Inline date picker** The picker is shown directly in the page without an input by using inline display mode.
- **Date selection** Separate scrollable wheels let users select the month, day, and year. The selected values appear in a central selection area, while neighboring values remain visually subdued.
- **Scrolling behavior** Users can scroll vertically through neighboring values to move between dates, including dates in other months or years.
- **Example panel** Three code snippets appear to the left of the picker, each demonstrating a supported date format.
- **Supported formats** The examples use a `JS date object`, an `ISO date string`, and a `Moment.js object`.
- **Navigate actions** Each code example includes a button that navigates the picker to a specific date using the corresponding format.
- **Button labels** The buttons are labeled `Set JS date object`, `Set ISO string`, and `Set moment.js object`.
- **Button interaction** Hovering over a button highlights it. Clicking the button navigates the picker to the example date.

## Best for

- **Supported date inputs** Showing developers which date formats the date picker accepts and how each format can be used to navigate to a specific date.

## Tutorial

### JS date object

```jsx
const [myValue, setValue] = useState(new Date());
setValue(new Date(2020, 10, 15, 10, 45));
const onChange = useCallback((ev) => {
    setValue(ev.value);
});
                            
<Datepicker returnFormat="jsdate" value={myValue} onChange={onChange} />
```

### ISO date string

```jsx
const [myValue, setValue] = useState(new Date());
setValue('2020-05-20T12:30:00');
const onChange = useCallback((ev) => {
    setValue(ev.value);
});    
                            
<Datepicker returnFormat="iso8601" value={myValue} onChange={onChange} />
```

### Moment.js object

```jsx
const [myValue, setValue] = useState(new Date());
setValue(moment([2020, 2, 6, 15, 30]);
const onChange = useCallback((ev) => {
    setValue(ev.value);
});

<Datepicker returnFormat="moment" value={myValue} onChange={onChange} />
```

## 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
- [`inputStyle`](https://mobiscroll.com/docs/react/datepicker/api#opt-inputStyle) - option
- [`labelStyle`](https://mobiscroll.com/docs/react/datepicker/api#opt-labelStyle) - option
- [`returnFormat`](https://mobiscroll.com/docs/react/datepicker/api#opt-returnFormat) - option

## Code

### JSX

```jsx
import { Button, Datepicker, Page, setOptions } from '@mobiscroll/react';
import moment from 'moment';
import { useCallback, useMemo, useState } from 'react';

setOptions({
  theme: 'ios',
  themeVariant: 'light'
});

function App() {
  const [dateObj, setDateObj] = useState();
  const [iso, setISO] = useState();
  const [momentObj, setMomentObj] = useState();

  const objString = useMemo(() => (dateObj ? dateObj.toString() : null), [dateObj]);
  const momentString = useMemo(() => (momentObj ? momentObj.toString() : null), [momentObj]);

  const setCustomObj = useCallback(() => {
    setDateObj(new Date(2020, 10, 15, 10, 45));
  }, []);

  const setCustomMoment = useCallback(() => {
    setMomentObj(moment([2020, 2, 6, 15, 30]));
  }, []);

  const setCustomISO = useCallback(() => {
    setISO('2020-05-20T12:30:00');
  }, []);

  const handleObjChange = useCallback((ev) => {
    setDateObj(ev.value);
  }, []);

  const handleIsoChange = useCallback((ev) => {
    setISO(ev.value);
  }, []);

  const handleMomentChange = useCallback((ev) => {
    setMomentObj(ev.value);
  }, []);

  return (
    <Page>
      <div className="mbsc-form-group">
        <div className="mbsc-form-group-title">Working with Js Date Objects</div>
        <div className="mbsc-button-group-block">
          <Button onClick={setCustomObj}>Set: Sun Nov 15 2020 10:45:00 GMT</Button>
        </div>
        <Datepicker
          controls={['date']}
          value={dateObj}
          onChange={handleObjChange}
          inputStyle="outline"
          label="Date object"
          labelStyle="stacked"
        />
      </div>
      <div className="mbsc-padding">Return value: {objString}</div>

      <div className="mbsc-form-group">
        <div className="mbsc-form-group-title">Working with Date strings</div>
        <div className="mbsc-button-group-block">
          <Button onClick={setCustomISO}>Set: 2020-05-20T12:30:00</Button>
        </div>
        <Datepicker
          controls={['date']}
          returnFormat="iso8601"
          value={iso}
          onChange={handleIsoChange}
          inputStyle="outline"
          label="ISO string"
          labelStyle="stacked"
        />
      </div>
      <div className="mbsc-padding">Return value: {iso}</div>

      <div className="mbsc-form-group">
        <div className="mbsc-form-group-title">Working with Moment JS Objects</div>
        <div className="mbsc-button-group-block">
          <Button onClick={setCustomMoment}>Set: 2020-03-06T15:30:00</Button>
        </div>
        <Datepicker
          controls={['date']}
          returnFormat="moment"
          value={momentObj}
          onChange={handleMomentChange}
          inputStyle="outline"
          label="Moment JS"
          labelStyle="stacked"
        />
      </div>
      <div className="mbsc-padding">Return value: {momentString}</div>
    </Page>
  );
}

export default App;
```

### TSX

```tsx
import { Button, Datepicker, MbscDatepickerChangeEvent, Page, setOptions } from '@mobiscroll/react';
import moment from 'moment';
import { FC, useCallback, useMemo, useState } from 'react';

setOptions({
  theme: 'ios',
  themeVariant: 'light'
});

const App: FC = () => {
  const [dateObj, setDateObj] = useState<Date>();
  const [iso, setISO] = useState<string>();
  const [momentObj, setMomentObj] = useState<object>();

  const objString = useMemo(() => (dateObj ? dateObj.toString() : null), [dateObj]);
  const momentString = useMemo(() => (momentObj ? momentObj.toString() : null), [momentObj]);

  const setCustomObj = useCallback(() => {
    setDateObj(new Date(2020, 10, 15, 10, 45));
  }, []);

  const setCustomMoment = useCallback(() => {
    setMomentObj(moment([2020, 2, 6, 15, 30]));
  }, []);

  const setCustomISO = useCallback(() => {
    setISO('2020-05-20T12:30:00');
  }, []);

  const handleObjChange = useCallback((ev: MbscDatepickerChangeEvent) => {
    setDateObj(new Date(ev.value as string));
  }, []);

  const handleIsoChange = useCallback((ev: MbscDatepickerChangeEvent) => {
    setISO(ev.value as string);
  }, []);

  const handleMomentChange = useCallback((ev: MbscDatepickerChangeEvent) => {
    setMomentObj(ev.value as object);
  }, []);

  return (
    <Page>
      <div className="mbsc-form-group">
        <div className="mbsc-form-group-title">Working with Js Date Objects</div>
        <div className="mbsc-button-group-block">
          <Button onClick={setCustomObj}>Set: Sun Nov 15 2020 10:45:00 GMT</Button>
        </div>
        <Datepicker
          controls={['date']}
          value={dateObj}
          onChange={handleObjChange}
          inputStyle="outline"
          label="Date object"
          labelStyle="stacked"
        />
      </div>
      <div className="mbsc-padding">Return value: {objString}</div>

      <div className="mbsc-form-group">
        <div className="mbsc-form-group-title">Working with Date strings</div>
        <div className="mbsc-button-group-block">
          <Button onClick={setCustomISO}>Set: 2020-05-20T12:30:00</Button>
        </div>
        <Datepicker
          controls={['date']}
          returnFormat="iso8601"
          value={iso}
          onChange={handleIsoChange}
          inputStyle="outline"
          label="ISO string"
          labelStyle="stacked"
        />
      </div>
      <div className="mbsc-padding">Return value: {iso}</div>

      <div className="mbsc-form-group">
        <div className="mbsc-form-group-title">Working with Moment JS Objects</div>
        <div className="mbsc-button-group-block">
          <Button onClick={setCustomMoment}>Set: 2020-03-06T15:30:00</Button>
        </div>
        <Datepicker
          controls={['date']}
          returnFormat="moment"
          value={momentObj}
          onChange={handleMomentChange}
          inputStyle="outline"
          label="Moment JS"
          labelStyle="stacked"
        />
      </div>
      <div className="mbsc-padding">Return value: {momentString}</div>
    </Page>
  );
};

export default App;
```

## Implementation notes

- Use `controls: ['date']` and `display: 'inline'` on a single `Datepicker`; call `setVal(...)` on that instance to programmatically navigate to a date in any of the supported formats.
- **JS date object** Calling `setVal(new Date(2020, 10, 15, 10, 45), ...)` combined with `returnFormat: 'jsdate'` (React/Vue/Angular/JS/jQuery all use the same `returnFormat` option name) makes `getVal()`/the bound value return a `Date` object.
- **ISO date string** Calling `setVal('2020-05-20T12:30:00', ...)` with `returnFormat: 'iso8601'` returns the value as an ISO 8601 string; the string must be passed to `setVal`/the model as a string, not passed through `new Date()` first.
- **Moment.js object** Calling `setVal(moment([2020, 2, 6, 15, 30]), ...)` together with `returnFormat: 'moment'` makes `getVal()`/the bound value return a Moment.js object.
- React binds via `value`/`onChange` (`ev.value`) with `useState`; Angular/Vue use `[(ngModel)]="date"` / `v-model="date"` two-way binding; JS uses `cal.setVal(...)`/`cal.getVal()`; jQuery uses `$('#cal').mobiscroll('setVal', ...)`/`.mobiscroll('getVal')`.
- `returnFormat` only controls the shape of the value handed back to the app - it does not change what input formats the picker accepts; dates, ISO strings, and Moment objects can all be passed in regardless of the configured `returnFormat`.

## 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: [Start-end selection](https://demo.mobiscroll.com/react/datetime/range-select.md) - React date time range picker & scroller with customizable start/end dates, labels, min & max length, range highlight.
- Next: [Formatting values](https://demo.mobiscroll.com/react/datetime/formatting-return-values.md) - React Date & time picker with variable formats, AM/PM, 12h/24h. Inherited from localization with override possibility.