---
title: "Javascript Range Min Max Length Example | Mobiscroll"
component: "Range"
framework: "JavaScript"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/javascript/range/min-max-length"
---

# Min Max Length - JavaScript Range demo

Enforce minimum and maximum length limits on date range selection with the Javascript date range picker — ideal for booking dates. Plain JS api for usage everywhere.

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

## Description

Besides [invalidating selection that is before and after a specific date](https://demo.mobiscroll.com/javascript/range/min-max-restrictions), the minimum and maximum allowed length of a range selection can be enforced through the [`minRange`](https://mobiscroll.com/docs/javascript/datepicker/api#opt-minRange) and [`maxRange`](https://mobiscroll.com/docs/javascript/datepicker/api#opt-maxRange) options.

This form of validation is easy to understand and reduces erroneous entries.

## What this demo shows

- An inline date range picker for selecting a start and end date from a calendar.
- **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.
- **Customize the selection** The configuration panel to the left of the calendar includes a selection list where users can select to show a date only calendar, a date only scroller, a date and time picker and a time only picker.
- **Range length** Below the view type selection, a minimum and maximum range length controls define how many days a user may select.

## Best for

- **Bookings and reservations** Hotel stays, travel dates, rentals, and other reservation workflows that require start and end dates.
- **Leave requests** Selecting a bounded period for time-off requests.
- **Reporting periods** Choosing a date range for reports and other time-based data views.
- **Constrained date ranges** Workflows that need minimum or maximum selection lengths, configurable range highlighting, or customized start and end labels.

## Tutorial

### Customize

- (x) Date only calendar
- ( ) Date only scroller
- ( ) Date & time picker
- ( ) Time picker

### Control the minimum and maximum length of the selection

- [ ] Minimum length of

`3`

days

- [ ] Maximum length of

`10`

days

```js
mobiscroll.datepicker('#picker', {
    controls: ['calendar'],
    select: 'range'
});
```

With "Date only scroller":

```js
mobiscroll.datepicker('#picker', {
    controls: ['date'],
    select: 'range'
});
```

With "Date & time picker":

```js
mobiscroll.datepicker('#picker', {
    controls: ['datetime'],
    select: 'range'
});
```

With "Time picker":

```js
mobiscroll.datepicker('#picker', {
    controls: ['time'],
    select: 'range'
});
```

With "Minimum length of" on:

```js
mobiscroll.datepicker('#picker', {
    controls: ['calendar'],
    select: 'range',
    minRange: 3
});
```

With "Maximum length of" on:

```js
mobiscroll.datepicker('#picker', {
    controls: ['calendar'],
    select: 'range',
    maxRange: 10
});
```

## 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
- [`select`](https://mobiscroll.com/docs/javascript/datepicker/api#opt-select) - option
- [`display`](https://mobiscroll.com/docs/javascript/datepicker/api#opt-display) - option
- [`minRange`](https://mobiscroll.com/docs/javascript/datepicker/api#opt-minRange) - option
- [`maxRange`](https://mobiscroll.com/docs/javascript/datepicker/api#opt-maxRange) - option

## Code

### JS

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

mobiscroll.datepicker('#demo-calendar', {
  controls: ['calendar'],
  select: 'range',
  display: 'inline',
  minRange: 3,
  maxRange: 10,
});

mobiscroll.datepicker('#demo-scroller', {
  controls: ['date'],
  select: 'range',
  display: 'inline',
  minRange: 3,
  maxRange: 10,
});
```

### HTML

```html
<div id="demo-calendar"></div>
<div id="demo-scroller"></div>
```

## Implementation notes

- Set `select: 'range'` together with `minRange`/`maxRange` to constrain how short or how long a range selection may be.
- With a date-only `controls` value (`['calendar']` or `['date']`), `minRange`/`maxRange` are counted in whole days (e.g. `minRange: 3`, `maxRange: 10`).
- With a time-only `controls` value (`['time']`) or a date-and-time `controls` value (`['date', 'time']`), `minRange`/`maxRange` are counted in milliseconds (e.g. `minRange: 9000000` ≈ 2h30m, `maxRange: 300000000` ≈ 3d11h20m).
- Omit `minRange`/`maxRange` (pass `undefined`) to remove that constraint - the picker then accepts any range length again.
- `controls` can be switched between `['calendar']`, `['date']`, `['date', 'time']`, and `['time']` at runtime on the same instance to change which control renders (calendar grid vs. scroller) without recreating the picker.
- Across frameworks the options are passed the same way as any other picker option: React `minRange={3}`/`maxRange={10}` props, Angular `[minRange]`/`[maxRange]` bindings, Vue `:minRange`/`:maxRange` bindings, and JS/jQuery `minRange`/`maxRange` keys in the options object (updated imperatively via `setOptions`).

## 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: [Date Restrictions](https://demo.mobiscroll.com/javascript/range/min-max-restrictions.md) - Set min and max date boundaries in the Javascript date range picker to restrict selectable dates and times — supports date-only and date-time modes.