---
title: "React Calendar Min & Max Date Restrictions Example | Mobiscroll"
component: "Calendar"
framework: "React"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/react/calendar/min-max-restrictions"
---

# Min & Max Date Restrictions - React Calendar demo

Restrict selectable dates and times in a React date picker with min and max values — for appointment booking, travel, or registration forms. For React and Next.JS.

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

## Description

Configuring minimum and maximum selectable values is great for reducing mistakes. Help people by limiting the selections for the task at hand. Use the [`min`](https://mobiscroll.com/docs/react/datepicker/api#opt-min) and [`max`](https://mobiscroll.com/docs/react/datepicker/api#opt-max) options to restrict the selection. Setting the values will disable dates/times earlier than `min` and dates/times that come after `max`.

By default these options are empty and the date picker supports infinite navigation, while the time picker has all 24 hours/60 minutes/... available for selection. Values can be passed as [JS date objects, ISO date strings or Moment.js objects](https://demo.mobiscroll.com/react/calendar/date-object-ISO-8601-moment).

**Looking to invalidate more dates/times?** [Discover how to disable specific values →](https://demo.mobiscroll.com/react/calendar/disabled-invalid-values)

## What this demo shows

- Shows a segmented control switcher between a date picker, which is selected by default, and a date-time picker. Both modes support minimum and maximum selectable values.
- **Header navigation** The month and year label in the upper-left corner opens month and year selection controls. The previous and next arrow buttons on the right move 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** Users can also change the displayed month by dragging the calendar left or right.
- **Day cell states** Hovering over a day gives its number a gray background. Selecting a day gives its number a blue background. 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 the corresponding month.
- **Time picker** In Date & time mode, a scroller-based time picker appears beside the single-month calendar. Separate wheels provide hours from 1 to 12, minutes from 0 to 59, and AM/PM selection.
- **Exact minimum and maximum values** The control panel enables both limits by default, with the minimum set to `01-01-1920` and the maximum set to `01-01-2050`. Dates or times before the minimum and after the maximum are disabled.
- **Dynamic restriction** The `Or set a dynamically calculated date` option disables dates more than 18 years in the past. This option is disabled by default.

## Best for

- **Appointment booking** Limit bookings to the dates and times when appointments can be offered.
- **Travel and accommodation** Prevent users from choosing arrival or departure dates outside an available booking window.
- **Age-based eligibility** Apply a dynamically calculated limit for workflows that require users to meet a minimum or maximum age.
- **Campaign and registration periods** Accept date selections only within a defined enrollment, promotion, or event window.
- **Historical and forecast data** Keep date filters within the period covered by the available data.

## Tutorial

### Set min/max values for

- (x) Date
- ( ) Date & time

### Set an exact date

- [x] Minimum date

`01/01/1920`

- [x] Maximum date

`01/01/2050`

### Or set a dynamically calculated date

- [ ] Date of birth (older than 18)

```jsx
<Datepicker 
    controls={['calendar']}
    min="1920-01-01"
    max="2050-01-01"
/>
```

With "Date & time":

```jsx
<Datepicker 
    controls={['calendar', 'time']}
    min="2000-01-01T12:00"
    max="2050-01-01T12:00"
/>
```

With "Minimum date" off:

```jsx
<Datepicker 
    controls={['calendar']}
    max="2050-01-01"
/>
```

With "Maximum date" off:

```jsx
<Datepicker 
    controls={['calendar']}
    min="1920-01-01"
/>
```

With "Date of birth (older than 18)" on:

```jsx
const now = new Date();

<Datepicker 
    controls={['calendar']}
    max={new Date(now.getFullYear() - 18, now.getMonth(), now.getDate())}
/>
```

## 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
- [`display`](https://mobiscroll.com/docs/react/datepicker/api#opt-display) - option
- [`min`](https://mobiscroll.com/docs/react/datepicker/api#opt-min) - option
- [`max`](https://mobiscroll.com/docs/react/datepicker/api#opt-max) - option
- [`controls`](https://mobiscroll.com/docs/react/datepicker/api#opt-controls) - option

## Code

### JSX

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

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

function App() {
  return (
    <div>
      <Datepicker display="inline" min="1920-01-01" max="2050-01-01" />
      <Datepicker controls={['calendar', 'time']} display="inline" min="2000-01-01T12:00" max="2050-01-01T12:00" />
    </div>
  );
}

export default App;
```

### TSX

```tsx
import { Datepicker, setOptions } from '@mobiscroll/react';
import { FC } from 'react';

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

const App: FC = () => (
  <div>
    <Datepicker controls={['calendar']} display="inline" min="1920-01-01" max="2050-01-01" />

    <Datepicker controls={['calendar', 'time']} display="inline" min="2000-01-01T12:00" max="2050-01-01T12:00" />
  </div>
);
export default App;
```

## Implementation notes

- `controls` can be switched at runtime between `['calendar']` and `['calendar', 'time']` via an option update on a single instance.
- `min` and `max` can each be set independently (e.g. defaulting to `'1920-01-01'` and `'2050-01-01'`) or left unset for no restriction on that bound.
- `max` can also be set to a dynamically calculated date instead of a fixed one, e.g. 18 years before today (`new Date(now.getFullYear() - 18, now.getMonth(), now.getDate())`).
- In Date & time mode, `min`/`max` bind full date-and-time values (e.g. `min: '2000-01-01T12:00'`, `max: '2050-01-01T12:00'`).
- `min`/`max` values can be passed as ISO strings, `Date` objects, or Moment.js objects.

## 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: [Disable & Validate Dates](https://demo.mobiscroll.com/react/calendar/disabled-invalid-values.md) - Restrict selectable dates in a React calendar date picker using recurring dates and min/max limits — for appointment booking and leave forms.