---
title: "React Range Presets Example | Mobiscroll"
component: "Range"
framework: "React"
library_version: "6.2.0"
url: "https://demo.mobiscroll.com/react/range/presets"
---

# Presets - React Range demo

Offer one-click preset ranges — Today, Yesterday, This week, Last month — on the React date range selector for fast filtering. For React and Next.JS.

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

## Description

The selected range can be adjusted by the user or you can programmatically set the `start` and `end`.

This is especially useful and effective when using the range for filtering and you'd like to offer predefined ranges like *Yesterday*, *Today*, *Last week* and so on. Setting the values can be done from something as simple as a button click.

## What this demo shows

- Demonstrates five preset actions for programmatically updating an inline date range picker.
- **Example panel** Five code examples appear to the left of the calendar, each paired with a button that applies the corresponding preset action.
- **Presets** The examples provide `Today`, `Yesterday`, `This week`, and `Last month` buttons for selecting predefined date ranges, plus a `Clear` button for removing the selection.
- **Button interaction** Hovering over a preset button highlights it. Clicking the button applies its date range or clears the current selection.
- **Inline date range picker** The date range picker is embedded directly in the page without an input by using inline display mode.
- **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

- **Reporting dashboards** Let users filter charts and metrics by familiar periods such as today, this week, or last month.
- **Activity and audit logs** Help users narrow long record lists to common recent date ranges without selecting each boundary manually.
- **Orders and transactions** Provide quick filters for reviewing records from standard daily, weekly, or monthly periods.
- **Repeat filtering workflows** Combine one-click presets with an adjustable date range when users frequently switch between standard and custom periods.

## Tutorial

### Setting today

```jsx
const now = new Date();
const [myValue, setValue] = React.useState(null);

const setToday = () => {
    setValue([now, now]);
};

<mobiscroll.Button onClick={setToday}>Today</mobiscroll.Button>                     
<Datepicker
    controls={['calendar']}
    select="range"
    value={myValue}
/>
```

### Setting yesterday

```jsx
const now = new Date();
const yesterday = new Date(now.getFullYear(), now.getMonth(), now.getDate() - 1);
const [myValue, setValue] = React.useState(null);

const setYesterday = () => {
    setValue([yesterday, yesterday]);
};

<mobiscroll.Button onClick={setYesterday}>Yesterday</mobiscroll.Button>                     
<Datepicker
    controls={['calendar']}
    select="range"
    value={myValue}
/>
```

### Setting this week

```jsx
const now = new Date();
const firstday = new Date(now.setDate(now.getDate() - now.getDay()));
const lastday = new Date(now.setDate(now.getDate() - now.getDay() + 6));
const [myValue, setValue] = React.useState(null);

const setWeek = () => {
    setValue([firstday, lastday]);
};

<mobiscroll.Button onClick={setWeek}>This week</mobiscroll.Button>                     
<Datepicker
    controls={['calendar']}
    select="range"
    value={myValue}
/>
```

### Setting last month

```jsx
const now = new Date();
const firstday = new Date(now.getFullYear(), now.getMonth() - 1, 1);
const lastday = new Date(now.getFullYear(), now.getMonth(), 0);
const [myValue, setValue] = React.useState(null);

const setMonth = () => {
    setValue([firstday, lastday]);
};

<mobiscroll.Button onClick={setMonth}>Last month</mobiscroll.Button>                     
<Datepicker
    controls={['calendar']}
    select="range"
    value={myValue}
/>
```

### Clear the selection with a simple click

```jsx
const [myValue, setValue] = React.useState(null);

const clear = () => {
    setValue(null);
};

<mobiscroll.Button onClick={clear}>Clear</mobiscroll.Button>                     
<Datepicker
    controls={['calendar']}
    select="range"
    value={myValue}
/>
```

## 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
- [`display`](https://mobiscroll.com/docs/react/datepicker/api#opt-display) - option
- [`showRangeLabels`](https://mobiscroll.com/docs/react/datepicker/api#opt-showRangeLabels) - option
- [`isOpen`](https://mobiscroll.com/docs/react/notifications/toast#opt-isOpen) - option
- [`onClose`](https://mobiscroll.com/docs/react/notifications/toast#event-onClose) - event
- [`controls`](https://mobiscroll.com/docs/react/datepicker/api#opt-controls) - option

## Code

### JSX

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

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

const now = new Date();
const curr = new Date();
const yesterday = new Date(now.getFullYear(), now.getMonth(), now.getDate() - 1);
const startWeek = new Date(curr.setDate(curr.getDate() - curr.getDay()));
const endWeek = new Date(curr.setDate(curr.getDate() - curr.getDay() + 6));
const startMonth = new Date(curr.getFullYear(), curr.getMonth() - 1, 1);
const endMonth = new Date(curr.getFullYear(), curr.getMonth(), 0);

function App() {
  const [value, setValue] = useState(null);
  const [isOpen, setOpen] = useState(false);
  const [toastMsg, setMsg] = useState('');

  const openToast = useCallback((message) => {
    setMsg(message);
    setOpen(true);
  }, []);

  const handleCloseToast = useCallback(() => {
    setOpen(false);
  }, []);

  const setToday = useCallback(() => {
    setValue([now, now]);
    openToast('Today Selected');
  }, [openToast]);

  const setYesterday = useCallback(() => {
    setValue([yesterday, yesterday]);
    openToast('Yesterday Selected');
  }, [openToast]);

  const setWeek = useCallback(() => {
    setValue([startWeek, endWeek]);
    openToast('This Week Selected');
  }, [openToast]);

  const setMonth = useCallback(() => {
    setValue([startMonth, endMonth]);
    openToast('Last Mont Selected');
  }, [openToast]);

  const clear = useCallback(() => {
    setValue(null);
    openToast('Clear Value');
  }, [openToast]);

  return (
    <Page className="md-range-filter">
      <h4 className="md-header">Filter Results by</h4>
      <div className="mbsc-padding">
        <Button onClick={setToday} className="mbsc-button-block">
          Today
        </Button>
        <Button onClick={setYesterday} className="mbsc-button-block">
          Yesterday
        </Button>
        <Button onClick={setWeek} className="mbsc-button-block">
          This Week
        </Button>
        <Button onClick={setMonth} className="mbsc-button-block">
          Last Month
        </Button>
        <Button onClick={clear} className="mbsc-button-block">
          Clear
        </Button>
      </div>
      <div className="mbsc-form-group">
        <div className="mbsc-form-group-title">Or by a custom range</div>
        <Datepicker select="range" display="inline" showRangeLabels={false} value={value} />
      </div>
      <Toast message={toastMsg} isOpen={isOpen} onClose={handleCloseToast} />
    </Page>
  );
}

export default App;
```

### TSX

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

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

const now = new Date();
const curr = new Date();
const yesterday = new Date(now.getFullYear(), now.getMonth(), now.getDate() - 1);
const startWeek = new Date(curr.setDate(curr.getDate() - curr.getDay()));
const endWeek = new Date(curr.setDate(curr.getDate() - curr.getDay() + 6));
const startMonth = new Date(curr.getFullYear(), curr.getMonth() - 1, 1);
const endMonth = new Date(curr.getFullYear(), curr.getMonth(), 0);

const App: FC = () => {
  const [value, setValue] = useState<Array<Date> | null>(null);
  const [isOpen, setOpen] = useState<boolean>(false);
  const [toastMsg, setMsg] = useState<string>('');

  const openToast = useCallback((message: string) => {
    setMsg(message);
    setOpen(true);
  }, []);

  const handleCloseToast = useCallback(() => {
    setOpen(false);
  }, []);

  const setToday = () => {
    setValue([now, now]);
    openToast('Today Selected');
  };

  const setYesterday = () => {
    setValue([yesterday, yesterday]);
    openToast('Yesterday Selected');
  };

  const setWeek = () => {
    setValue([startWeek, endWeek]);
    openToast('This Week Selected');
  };

  const setMonth = () => {
    setValue([startMonth, endMonth]);
    openToast('Last Mont Selected');
  };

  const clear = () => {
    setValue(null);
    openToast('Clear Value');
  };

  return (
    <Page className="md-range-filter">
      <h4 className="md-header">Filter Results by</h4>
      <div className="mbsc-padding">
        <Button onClick={setToday} className="mbsc-button-block">
          Today
        </Button>
        <Button onClick={setYesterday} className="mbsc-button-block">
          Yesterday
        </Button>
        <Button onClick={setWeek} className="mbsc-button-block">
          This Week
        </Button>
        <Button onClick={setMonth} className="mbsc-button-block">
          Last Month
        </Button>
        <Button onClick={clear} className="mbsc-button-block">
          Clear
        </Button>
      </div>
      <div className="mbsc-form-group">
        <div className="mbsc-form-group-title">Or by a custom range</div>
        <Datepicker controls={['calendar']} select="range" display="inline" showRangeLabels={false} value={value} />
      </div>
      <Toast message={toastMsg} isOpen={isOpen} onClose={handleCloseToast} />
    </Page>
  );
};

export default App;
```

### CSS

```css
.md-range-filter .md-header {
  text-align: center;
  padding: 1em 0.75em 0 0.75em;
  margin: 0;
}
```

## Implementation notes

- With `select: 'range'`, the picker's value is a `[start, end]` pair of `Date` objects (or `null` to clear it).
- A preset button computes the `[start, end]` pair for the target period and applies it to the picker: `[now, now]` for today, `[yesterday, yesterday]` for yesterday, `[firstDayOfWeek, lastDayOfWeek]` for this week (derived from `now.getDate() - now.getDay()`), and `[firstDayOfLastMonth, lastDayOfLastMonth]` for last month (`new Date(y, m - 1, 1)` to `new Date(y, m, 0)`).
- Clearing the selection is done by applying `null` as the value in place of a `[start, end]` pair.
- Framework-specific ways to apply a preset: JS/jQuery call `.setVal([start, end])` (or `.setVal(null)` to clear) on the stored picker instance; React updates the controlled `value` state passed to the `value` prop; Angular updates the bound `range` property (two-way `[(ngModel)]` or a plain property re-render); Vue updates the `v-model`-bound ref.
- The picker itself needs no special option beyond `controls: ['calendar']` and `select: 'range'` - presets only change the bound/set value, not the picker configuration.

## 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

- Next: [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.