---
title: "Javascript Date & Time Min & max values Example | Mobiscroll"
component: "Date & Time"
framework: "JavaScript"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/javascript/datetime/min-max-restrictions"
---

# Min & max values - JavaScript Date & Time demo

Javascript date time picker & scroller with min/max restrictions, DOB picker, custom header text for instructions. Plain JavaScript API.

- [Live demo](https://demo.mobiscroll.com/javascript/datetime/min-max-restrictions)
- [View code on GitHub](https://github.com/acidb/mobiscroll-demos-javascript/tree/main/src/demos/datepicker/datetime/min-max-restrictions)
- This demo in other frameworks: [jQuery](https://demo.mobiscroll.com/jquery/datetime/min-max-restrictions.md), [Angular](https://demo.mobiscroll.com/angular/datetime/min-max-restrictions.md), [React](https://demo.mobiscroll.com/react/datetime/min-max-restrictions.md), [Vue](https://demo.mobiscroll.com/vue/datetime/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/javascript/datepicker/api#opt-min) and [`max`](https://mobiscroll.com/docs/javascript/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/javascript/datetime/date-object-ISO-8601-moment).

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

## What this demo shows

- Shows a wheel-style inline date picker for setting min and max values, restrictions.
- **Display mode** A segmented control on the left side of the picker switches between a date, time list, time grid and date and time picker layout. The date picker is selected by default.
- **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.
- **Inline date picker** The example embeds the picker 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.

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

- (x) Date
- ( ) Time list
- ( ) Time grid
- ( ) 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)

```js
mobiscroll.datepicker('#datepicker', {
    controls: ['date'],
    min: '1920-01-01',
    max: '2050-01-01'
});
```

With "Time list":

```js
mobiscroll.datepicker('#datepicker', {
    controls: ['time'],
    min: '10:30',
    max: '19:30'
});
```

With "Time grid":

```js
mobiscroll.datepicker('#datepicker', {
    controls: ['timegrid'],
    min: '10:30',
    max: '19:30'
});
```

With "Date & time":

```js
mobiscroll.datepicker('#datepicker', {
    controls: ['datetime'],
    min: '2000-01-01T12:00',
    max: '2050-01-01T12:00'
});
```

With "Minimum date" off:

```js
mobiscroll.datepicker('#datepicker', {
    controls: ['date'],
    max: '2050-01-01'
});
```

With "Maximum date" off:

```js
mobiscroll.datepicker('#datepicker', {
    controls: ['date'],
    min: '1920-01-01'
});
```

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

```js
var now = new Date();

mobiscroll.datepicker('#datepicker', {
    controls: ['date'],
    max: new Date(now.getFullYear() - 18, now.getMonth(), now.getDate())
});
```

## API used in this demo

- [`theme`](https://mobiscroll.com/docs/javascript/datepicker/api#opt-theme) - option
- [`themeVariant`](https://mobiscroll.com/docs/javascript/datepicker/api#opt-themeVariant) - option
- [`controls`](https://mobiscroll.com/docs/javascript/datepicker/api#opt-controls) - option
- [`display`](https://mobiscroll.com/docs/javascript/datepicker/api#opt-display) - option
- [`min`](https://mobiscroll.com/docs/javascript/datepicker/api#opt-min) - option
- [`max`](https://mobiscroll.com/docs/javascript/datepicker/api#opt-max) - option

## Code

### JS

```js
mobiscroll.setOptions({
  theme: 'ios',
  themeVariant: 'light'
});

mobiscroll.datepicker('#demo-date', {
  controls: ['date'],
  display: 'inline',
  min: '1920-01-01',
  max: '2050-01-01',
});

mobiscroll.datepicker('#demo-time', {
  controls: ['time'],
  display: 'inline',
  min: '10:30',
  max: '19:30',
});

mobiscroll.datepicker('#demo-timegrid', {
  controls: ['timegrid'],
  display: 'inline',
  min: '10:30',
  max: '19:30',
});

mobiscroll.datepicker('#demo-datetime', {
  controls: ['datetime'],
  display: 'inline',
  min: '2000-01-01T12:00',
  max: '2050-01-01T12:00',
});
```

### HTML

```html
<div id="demo-date"></div>
<div id="demo-time"></div>
<div id="demo-timegrid"></div>
<div id="demo-datetime"></div>
```

## Implementation notes

- A single inline `Datepicker` instance's `controls` can be switched at runtime between `['date']`, `['time']`, `['timegrid']`, and `['datetime']` via `setOptions`.
- In `Date` mode, `min` and `max` can be set independently, e.g. `min: '1920-01-01'` and `max: '2050-01-01'`.
- `max` can instead be set to a dynamically calculated date, e.g. an 18-years-ago date computed as `new Date(now.getFullYear() - 18, now.getMonth(), now.getDate())`, for age-based restrictions (Date mode only).
- In `Time list` mode, `min`/`max` can be set to time-of-day values relative to the current date, e.g. `10:30` and `19:30`.
- `Time grid` mode (`controls: ['timegrid']`) supports the same `min`/`max` time-of-day restrictions as `Time list` mode.
- 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-javascript.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 javascript
   ```

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 javascript --trial`.

Running a demo locally requires a Mobiscroll trial or a license; setup is per framework at https://mobiscroll.com/docs/javascript/getting-started/installation

## Related demos

- Next: [Disabled values](https://demo.mobiscroll.com/javascript/datetime/disabled-invalid-values.md) - Javascript datepicker example for setting invalid days, disabling dates, weekends, holidays, specific and recurring dates.