---
title: "React Range Custom Date & Time Format Example | Mobiscroll"
component: "Range"
framework: "React"
library_version: "6.2.0"
url: "https://demo.mobiscroll.com/react/range/formatting-return-values"
---

# Custom Date & Time Format - React Range demo

Set custom date and time display formats on the React date range picker — see how selected values appear and reorder the time picker wheels. For React and Next.js.

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

## Description

Use the [`dateFormat`](https://mobiscroll.com/docs/react/datepicker/api#localization-dateFormat), [`timeFormat`](https://mobiscroll.com/docs/react/datepicker/api#localization-timeFormat) options to customize how the values show up in the inputs after selection. If the formats are not explicitly set, they are inherited from the localization settings.

Besides customizing the date and time formats you can reorder the time picker wheels and change its formats with the [`timeWheels`](https://mobiscroll.com/docs/react/datepicker/api#localization-timeWheels) options.

**Interested in learning about localization?** [Check out how the return format changes based on locale →](https://demo.mobiscroll.com/react/range/localization)

## What this demo shows

- Fourteen input-based date, month, time, and date-time range pickers demonstrate different ways to format selected values.
- **Date range picker with inputs** These examples opens the range picker when the user focuses or clicks the input.
- **Input behavior** The range picker opens below the input over a darkened backdrop. Clicking outside the picker closes it. 
- **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.
- **Footer actions** The gray `Cancel` button discards the change, while the blue `Set` button confirms the selected date range. Until a range is selected, the `Set` button remains inactive.
- **Input value** Confirming a date with `Set` displays the selected range in the input using a month, day, and year format.
- **Example 1 - Default date format** Displays the month, day, and year as numbers separated by `/`.
- **Example 2 - Numeric date** Uses `dateFormat: 'DD.MM.YYYY'`.
- **Example 3 - Month only** Uses `dateFormat: 'MMMM'`.
- **Example 4 - Full month name** Uses `dateFormat: 'D MMMM YYYY'`.
- **Example 5 - Month and year** Uses `dateFormat: 'MM/YYYY'`.
- **Example 6 - Weekday and abbreviated month** Uses `dateFormat: 'DDD DD MMM, YYYY'`.
- **Example 7 - ATOM date** Uses `dateFormat: 'YYYY-MM-DD'`.
- **Example 8 - COOKIE date** Uses `dateFormat: 'DDD, DD MMM YYYY'`.
- **Example 9 - Default time format** Uses a time-only scroller with the default time format.
- **Example 10 - 12-hour time** Uses a time-only scroller with `timeFormat: 'hh:mm A'`.
- **Example 11 - 24-hour time** Uses a time-only scroller with `timeFormat: 'HH:mm'`.
- **Example 12 - 24-hour time with seconds** Uses a time-only scroller with `timeFormat: 'HH:mm:ss'`.
- **Example 13 - Date and time** Combines a date picker with a time scroller using `timeFormat: 'HH:mm:ss'`.
- **Example 14 - Custom date and time** Combines a date picker with a time scroller using `dateFormat: 'DDD D MMM, YYYY'` and `timeFormat: 'H:mm'`.

## Best for

- **Regional date conventions** Displaying date ranges in the numeric or text-based order expected by a specific audience.
- **Standardized date values** Presenting selections in formats such as the ATOM-style `YYYY-MM-DD` pattern.
- **Month-based workflows** Collecting a month or a month-and-year range values without displaying a full date range in the input.
- **Time entry** Supporting 12-hour or 24-hour time values, with optional seconds.
- **Date-time forms** Showing combined date and time range selections in a format suited to the surrounding form or workflow.
- **Readable summaries** Using weekday and month names when a more descriptive input value is easier to scan than a fully numeric date.

## Tutorial

```jsx
<Datepicker
    controls={['calendar']}
/>
```

```jsx
<Datepicker
    controls={['calendar']}
    dateFormat="DD.MM.YYYY"
/>
```

```jsx
<Datepicker
    controls={['calendar']}
    dateFormat="D MMMM YYYY"
/>
```

```jsx
<Datepicker
    controls={['calendar']}
    dateFormat="DDD DD MMM, YYYY"
/>
```

```jsx
<Datepicker
    controls={['calendar']}
    dateFormat="YYYY-MM-DD"
/>
```

```jsx
<Datepicker
    controls={['calendar']}
    dateFormat="DDD, DD MMM YYYY"
/>
```

```jsx
<Datepicker
    controls={['time']}
/>
```

```jsx
<Datepicker
    controls={['time']}
    timeFormat="hh:mm A"
/>
```

```jsx
<Datepicker
    controls={['time']}
    timeFormat="HH:mm"
/>
```

```jsx
<Datepicker
    controls={['time']}
    timeFormat="HH:mm:ss"
/>
```

```jsx
<Datepicker
    controls={['calendar', 'time']}
    timeFormat="HH:mm:ss"
/>
```

```jsx
<Datepicker
    controls={['calendar', 'time']}
    dateFormat="DDD D MMM, YYYY"
    timeFormat="H:mm"
    dateWheels="|DDD D MMM, YYYY|"
/>
```

## 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
- [`select`](https://mobiscroll.com/docs/react/datepicker/api#opt-select) - option
- [`onChange`](https://mobiscroll.com/docs/react/datepicker/api#event-onChange) - event
- [`dateFormat`](https://mobiscroll.com/docs/react/datepicker/api#localization-dateFormat) - option
- [`controls`](https://mobiscroll.com/docs/react/datepicker/api#opt-controls) - option
- [`timeFormat`](https://mobiscroll.com/docs/react/datepicker/api#localization-timeFormat) - option
- [`dateWheels`](https://mobiscroll.com/docs/react/datepicker/api#localization-dateWheels) - option
- [`inputProps`](https://mobiscroll.com/docs/react/datepicker/api#opt-inputProps) - option

## Code

### JSX

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

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

const currentWeek = ['2026-11-06T00:00', '2026-11-12T00:00'];
const currentTime = ['2026-11-06T20:00', '2026-11-06T22:00'];

function App() {
  const [rangeValue, setRangeValue] = useState(currentWeek);
  const [separatorValue, setSeparatorValue] = useState(currentWeek);
  const [monthValue, setMonthValue] = useState(currentWeek);
  const [dayValue, setDayValue] = useState(currentWeek);
  const [atomValue, setAtomValue] = useState(currentWeek);
  const [cookieValue, setCookieValue] = useState(currentWeek);
  const [timeValue, setTimeValue] = useState(currentTime);
  const [h12Value, setH12Value] = useState(currentTime);
  const [h24Value, setH24Value] = useState(currentTime);
  const [hmsValue, setHmsValue] = useState(currentTime);
  const [dateTimeValue, setDateTimeValue] = useState(currentTime);
  const [dayNameValue, setDayNameValue] = useState(currentTime);

  const changeRange = useCallback((args) => {
    setRangeValue(args.value);
  }, []);
  const changeSeparator = useCallback((args) => {
    setSeparatorValue(args.value);
  }, []);
  const changeMonth = useCallback((args) => {
    setMonthValue(args.value);
  }, []);
  const changeDay = useCallback((args) => {
    setDayValue(args.value);
  }, []);
  const changeAtom = useCallback((args) => {
    setAtomValue(args.value);
  }, []);
  const changeCookie = useCallback((args) => {
    setCookieValue(args.value);
  }, []);
  const changeTime = useCallback((args) => {
    setTimeValue(args.value);
  }, []);
  const changeH12 = useCallback((args) => {
    setH12Value(args.value);
  }, []);
  const changeH24 = useCallback((args) => {
    setH24Value(args.value);
  }, []);
  const changeHms = useCallback((args) => {
    setHmsValue(args.value);
  }, []);
  const changeDateTime = useCallback((args) => {
    setDateTimeValue(args.value);
  }, []);
  const changeDayName = useCallback((args) => {
    setDayNameValue(args.value);
  }, []);

  return (
    <Page>
      <div className="mbsc-form-group">
        <div className="mbsc-form-group-title">Date</div>
        <Datepicker select="range" value={rangeValue} onChange={changeRange} label="Default" />
        <Datepicker select="range" value={separatorValue} onChange={changeSeparator} dateFormat="DD.MM.YYYY" label="Separator" />
        <Datepicker select="range" value={monthValue} onChange={changeMonth} dateFormat="D MMMM YYYY" label="Month name" />
        <Datepicker select="range" value={dayValue} onChange={changeDay} dateFormat="DDD DD MMM, YYYY" label="Day of week" />
        <Datepicker select="range" value={atomValue} onChange={changeAtom} dateFormat="YYYY-MM-DD" label="ATOM" />
        <Datepicker select="range" value={cookieValue} onChange={changeCookie} dateFormat="DDD, DD MMM YYYY" label="COOKIE" />
      </div>
      <div className="mbsc-form-group">
        <div className="mbsc-form-group-title">Time</div>
        <Datepicker controls={['time']} select="range" value={timeValue} onChange={changeTime} label="Default time" />
        <Datepicker controls={['time']} select="range" value={h12Value} onChange={changeH12} timeFormat="hh:mm A" label="12h" />
        <Datepicker controls={['time']} select="range" value={h24Value} onChange={changeH24} timeFormat="HH:mm" label="24h" />
        <Datepicker controls={['time']} select="range" value={hmsValue} onChange={changeHms} timeFormat="HH:mm:ss" label="Hour, min, sec" />
      </div>
      <div className="mbsc-form-group">
        <div className="mbsc-form-group-title">Date & time</div>
        <Datepicker
          controls={['calendar', 'time']}
          select="range"
          value={dateTimeValue}
          onChange={changeDateTime}
          label="Default date & time"
        />
        <Datepicker
          controls={['calendar', 'time']}
          select="range"
          value={dayNameValue}
          onChange={changeDayName}
          dateFormat="DDD D MMM, YYYY"
          timeFormat="H:mm"
          dateWheels="|DDD D MMM, YYYY|"
          label="Day name"
        />
      </div>
    </Page>
  );
}

export default App;
```

### TSX

```tsx
import { Datepicker, MbscDatepickerChangeEvent, MbscDateType, Page, setOptions } from '@mobiscroll/react';
import { useCallback, useState } from 'react';

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

const currentWeek = ['2026-11-06T00:00', '2026-11-12T00:00'];
const currentTime = ['2026-11-06T20:00', '2026-11-06T22:00'];

function App() {
  const [rangeValue, setRangeValue] = useState<MbscDateType[]>(currentWeek);
  const [separatorValue, setSeparatorValue] = useState<MbscDateType[]>(currentWeek);
  const [monthValue, setMonthValue] = useState<MbscDateType[]>(currentWeek);
  const [dayValue, setDayValue] = useState<MbscDateType[]>(currentWeek);
  const [atomValue, setAtomValue] = useState<MbscDateType[]>(currentWeek);
  const [cookieValue, setCookieValue] = useState<MbscDateType[]>(currentWeek);
  const [timeValue, setTimeValue] = useState<MbscDateType[]>(currentTime);
  const [h12Value, setH12Value] = useState<MbscDateType[]>(currentTime);
  const [h24Value, setH24Value] = useState<MbscDateType[]>(currentTime);
  const [hmsValue, setHmsValue] = useState<MbscDateType[]>(currentTime);
  const [dateTimeValue, setDateTimeValue] = useState<MbscDateType[]>(currentTime);
  const [dayNameValue, setDayNameValue] = useState<MbscDateType[]>(currentTime);

  const changeRange = useCallback((args: MbscDatepickerChangeEvent) => {
    setRangeValue(args.value as MbscDateType[]);
  }, []);
  const changeSeparator = useCallback((args: MbscDatepickerChangeEvent) => {
    setSeparatorValue(args.value as MbscDateType[]);
  }, []);
  const changeMonth = useCallback((args: MbscDatepickerChangeEvent) => {
    setMonthValue(args.value as MbscDateType[]);
  }, []);
  const changeDay = useCallback((args: MbscDatepickerChangeEvent) => {
    setDayValue(args.value as MbscDateType[]);
  }, []);
  const changeAtom = useCallback((args: MbscDatepickerChangeEvent) => {
    setAtomValue(args.value as MbscDateType[]);
  }, []);
  const changeCookie = useCallback((args: MbscDatepickerChangeEvent) => {
    setCookieValue(args.value as MbscDateType[]);
  }, []);
  const changeTime = useCallback((args: MbscDatepickerChangeEvent) => {
    setTimeValue(args.value as MbscDateType[]);
  }, []);
  const changeH12 = useCallback((args: MbscDatepickerChangeEvent) => {
    setH12Value(args.value as MbscDateType[]);
  }, []);
  const changeH24 = useCallback((args: MbscDatepickerChangeEvent) => {
    setH24Value(args.value as MbscDateType[]);
  }, []);
  const changeHms = useCallback((args: MbscDatepickerChangeEvent) => {
    setHmsValue(args.value as MbscDateType[]);
  }, []);
  const changeDateTime = useCallback((args: MbscDatepickerChangeEvent) => {
    setDateTimeValue(args.value as MbscDateType[]);
  }, []);
  const changeDayName = useCallback((args: MbscDatepickerChangeEvent) => {
    setDayNameValue(args.value as MbscDateType[]);
  }, []);
  return (
    <Page>
      <div className="mbsc-form-group">
        <div className="mbsc-form-group-title">Date</div>
        <Datepicker
          controls={['calendar']}
          select="range"
          value={rangeValue}
          onChange={changeRange}
          inputProps={{
            label: 'Default',
          }}
        />
        <Datepicker
          controls={['calendar']}
          select="range"
          value={separatorValue}
          onChange={changeSeparator}
          dateFormat="DD.MM.YYYY"
          inputProps={{
            label: 'Separator',
          }}
        />
        <Datepicker
          controls={['calendar']}
          select="range"
          value={monthValue}
          onChange={changeMonth}
          dateFormat="D MMMM YYYY"
          inputProps={{
            label: 'Month name',
          }}
        />
        <Datepicker
          controls={['calendar']}
          select="range"
          value={dayValue}
          onChange={changeDay}
          dateFormat="DDD DD MMM, YYYY"
          inputProps={{
            label: 'Day of week',
          }}
        />
        <Datepicker
          controls={['calendar']}
          select="range"
          value={atomValue}
          onChange={changeAtom}
          dateFormat="YYYY-MM-DD"
          inputProps={{
            label: 'ATOM',
          }}
        />
        <Datepicker
          controls={['calendar']}
          select="range"
          value={cookieValue}
          onChange={changeCookie}
          dateFormat="DDD, DD MMM YYYY"
          inputProps={{
            label: 'COOKIE',
          }}
        />
      </div>
      <div className="mbsc-form-group">
        <div className="mbsc-form-group-title">Time</div>
        <Datepicker
          controls={['time']}
          select="range"
          value={timeValue}
          onChange={changeTime}
          inputProps={{
            label: 'Default time',
          }}
        />
        <Datepicker
          controls={['time']}
          select="range"
          value={h12Value}
          onChange={changeH12}
          timeFormat="hh:mm A"
          inputProps={{
            label: '12h',
          }}
        />
        <Datepicker
          controls={['time']}
          select="range"
          value={h24Value}
          onChange={changeH24}
          timeFormat="HH:mm"
          inputProps={{
            label: '24h',
          }}
        />
        <Datepicker
          controls={['time']}
          select="range"
          value={hmsValue}
          onChange={changeHms}
          timeFormat="HH:mm:ss"
          inputProps={{
            label: 'Hour, min, sec',
          }}
        />
      </div>
      <div className="mbsc-form-group">
        <div className="mbsc-form-group-title">Date & time</div>
        <Datepicker
          controls={['calendar', 'time']}
          select="range"
          value={dateTimeValue}
          onChange={changeDateTime}
          inputProps={{
            label: 'Default date & time',
          }}
        />
        <Datepicker
          controls={['calendar', 'time']}
          select="range"
          value={dayNameValue}
          onChange={changeDayName}
          dateFormat="DDD D MMM, YYYY"
          timeFormat="H:mm"
          dateWheels="|DDD D MMM, YYYY|"
          inputProps={{
            label: 'Day name',
          }}
        />
      </div>
    </Page>
  );
}
export default App;
```

## Implementation notes

- Set `select: 'range'` on the `Datepicker` so it returns a start/end pair instead of a single value; when no `dateFormat`/`timeFormat` is set, the format is inherited from the active localization settings.
- Use `controls: ['calendar']` with `dateFormat` for date-only ranges: `'DD.MM.YYYY'` (numeric with separators), `'D MMMM YYYY'` (full month name), `'DDD DD MMM, YYYY'` (weekday + abbreviated month), `'YYYY-MM-DD'` (ATOM), or `'DDD, DD MMM YYYY'` (COOKIE).
- Use `controls: ['time']` with `timeFormat` for time-only ranges: `'hh:mm A'` (12-hour), `'HH:mm'` (24-hour), or `'HH:mm:ss'` (24-hour with seconds).
- Use `controls: ['calendar', 'time']` with both a `dateFormat` and `timeFormat` for combined date-and-time ranges, e.g. `timeFormat: 'HH:mm:ss'` alone, or `dateFormat: 'DDD D MMM, YYYY'` with `timeFormat: 'H:mm'`.
- Reorder or reformat the time picker wheels independently of the display format with `timeWheels`, e.g. `dateWheels: '|DDD D MMM, YYYY|'` to control how a single combined wheel renders.
- Set the initial range programmatically with `.setVal([startDate, endDate], true)` on the picker instance (the second argument suppresses the change event on init).

## 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: [Date Formats](https://demo.mobiscroll.com/react/range/date-object-ISO-8601-moment.md) - Use the React date range picker with JS Date, ISO 8601, or Moment.js — auto-detect input formats and configure the return formats.
- Next: [Timezone Settings](https://demo.mobiscroll.com/react/range/setting-the-picker-timezone.md) - Configure data and display timezones on the React date range picker using Luxon, Moment-Timezone, or Day.js for timezone-aware date selection.