---
title: "React Range Date Formats Example | Mobiscroll"
component: "Range"
framework: "React"
library_version: "6.2.0"
url: "https://demo.mobiscroll.com/react/range/date-object-ISO-8601-moment"
---

# Date Formats - React Range demo

Use the React date range picker with JS Date, ISO 8601, or Moment.js — auto-detect input formats and configure the return formats. For React and Next.JS.

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

## Description

The range 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/range/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 range from a calendar.
- **Example panel** Three code snippets appear to the left of the calendar, 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 calendar 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 calendar to the example date.
- **Inline date range picker** Displays the date range picker directly in the page without an input by using inline display mode.
- **Start and end inputs** Clickable inputs appear above the calendar header. The active input has a white background, while the inactive input has a gray background. A clear button appears after a range is selected.
- **Header navigation** The month and year label in the upper-left corner opens the month and year picker. The previous and next arrow buttons on the right navigate between months.
- **Month view** A fixed weekday header shows abbreviated day names from Sunday through Saturday, with dates arranged in a grid below.
- **Month navigation** Drag the calendar left or right to move between months.
- **Day cell states** Hovering over a day highlights its number with a gray background. The first selected day becomes the range start, and the second becomes the range end. Selected days are highlighted in blue. The current date is highlighted by default and remains blue when another date is selected.
- **Adjacent months** Dates from the previous and next months use a muted style. Selecting one navigates to its corresponding month.

## 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());
const onChange = useCallback((ev) => {
    setValue(ev.value);
});
setValue([new Date(2020, 10, 15), new Date(2020, 10, 21)]);
                            
<Datepicker returnFormat="jsdate" value={myValue} onChange={onChange} />
```

### ISO date string

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

### Moment.js object

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

<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
- [`select`](https://mobiscroll.com/docs/react/datepicker/api#opt-select) - 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[0].toString() + ' - ' + momentObj[1].toString() : null), [momentObj]);

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

  const setCustomISO = useCallback(() => {
    setISO(['2020-05-20', '2020-05-26']);
  }, []);

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

  const handleDateObjChange = 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 - Sat Nov 21 2020</Button>
        </div>
        <Datepicker
          controls={['calendar']}
          select="range"
          value={dateObj}
          onChange={handleDateObjChange}
          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-20 - 2020-05-26</Button>
        </div>
        <Datepicker
          controls={['calendar']}
          select="range"
          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-06 - 2020-03-12</Button>
        </div>
        <Datepicker
          controls={['calendar']}
          select="range"
          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[0].toString() + ' - ' + momentObj[1].toString() : null), [momentObj]);

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

  const setCustomISO = useCallback(() => {
    setISO(['2020-05-20', '2020-05-26']);
  }, []);

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

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

  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 - Sat Nov 21 2020</Button>
        </div>
        <Datepicker
          controls={['calendar']}
          select="range"
          value={dateObj}
          onChange={handleDateObjChange}
          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-20 - 2020-05-26</Button>
        </div>
        <Datepicker
          controls={['calendar']}
          select="range"
          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-06 - 2020-03-12</Button>
        </div>
        <Datepicker
          controls={['calendar']}
          select="range"
          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

- Set `controls: ['calendar']`, `select: 'range'`, and `display: 'inline'` for the inline range calendar.
- Incoming values (e.g. for `value`/`setVal`, `invalid`/`valid`, `min`/`max`) accept a JS `Date` object (`new Date(2020, 10, 15)`), an ISO 8601 date string (`'2020-05-20'`), or a Moment.js object (`moment([2020, 2, 6])`) - for a range, pass a two-element array/tuple of `[start, end]` in any of these formats.
- Set `returnFormat` to `'jsdate'`, `'iso8601'`, or `'moment'` to control the type the picker returns/emits on selection, independent of the format used to set the value.
- Framework-specific value wiring differs: React uses a controlled `value` prop plus `onChange`; Angular uses `[(ngModel)]`; Vue uses `v-model`; JS/jQuery set/read values imperatively via `setVal(value)`/`getVal()` (jQuery: `.mobiscroll('setVal', value)`/`.mobiscroll('getVal')`) on the picker instance.
- Moment.js objects require Moment.js to be loaded separately; do not pass a date string directly to `new Date()` - construct it with explicit year/month/day arguments instead.

## 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: [Presets](https://demo.mobiscroll.com/react/range/presets.md) - Offer one-click preset ranges — Today, Yesterday, This week, Last month — on the React date range selector for fast filtering.
- Next: [Custom Date & Time Format](https://demo.mobiscroll.com/react/range/formatting-return-values.md) - Set custom date and time display formats on the React date range picker — see how selected values appear and reorder the time picker wheels.