---
title: "JQuery Range Date Restrictions Example | Mobiscroll"
component: "Range"
framework: "jQuery"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/jquery/range/min-max-restrictions"
---

# Date Restrictions - jQuery Range demo

Set min and max date boundaries in the JQuery date range picker to restrict selectable dates and times — supports date-only and date-time modes. For jQuery or jQuery Mobile.

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

**Looking to invalidate more dates/times?** [Discover how to disable specific values →](https://demo.mobiscroll.com/jquery/range/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.
- **Display mode** A segmented control on the left side of the picker switches between a date 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.
- **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

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

- [ ] Next six months from today

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

With "Date & time":

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

With "Minimum date" off:

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

With "Maximum date" off:

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

With "Next six months from today" on:

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

$('#datepicker').mobiscroll().datepicker({
    controls: ['calendar'],
    select: 'range',
    min: now,
    max: new Date(now.getFullYear(), now.getMonth() + 6, now.getDate())
});
```

## API used in this demo

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

## Code

### JS

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

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

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

### HTML

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

## Implementation notes

- Set `select: 'range'` with `showRangeLabels: true`, plus `min`/`max` to disable dates/times outside the given bounds.
- `min`/`max` accept a JS `Date` object, an ISO date string, or a Moment.js object; omitting either (passing `undefined`) removes that bound and restores infinite navigation on that side.
- `controls: ['calendar']` restricts by date only; `controls: ['calendar', 'time']` restricts by date and time together, so `min`/`max` should then include a time-of-day component.
- A dynamically calculated bound (e.g. "18 years in the past") is computed once from `new Date()` and passed as the `min`/`max` value like any other date - recompute and re-apply it if the bound needs to stay current.
- Changes are applied at runtime by calling `.setOptions({ min, max })` on the range instance (JS/jQuery); in React the `min`/`max` props are passed as plain string/`Date` values, in Angular via `[min]`/`[max]` bindings, and in Vue via `:min`/`:max` bindings - all re-render with the new bounds without recreating the picker.
- To disable additional individual dates/times inside the `min`-`max` window (e.g. holidays, sold-out days), combine this with the `invalid`/`valid` options described in the disabled-invalid-values demo.

## 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-jquery.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 jquery
   ```

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

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

## Related demos

- Previous: [Min Max Length](https://demo.mobiscroll.com/jquery/range/min-max-length.md) - Enforce minimum and maximum length limits on date range selection with the JQuery date range picker — ideal for booking dates.
- Next: [Date Validation](https://demo.mobiscroll.com/jquery/range/disabled-invalid-values.md) - Disable specific dates, date ranges, or recurring dates in the JQuery date range picker to guide users toward valid selections.