---
title: "JQuery Calendar Date Range Picker Example | Mobiscroll"
component: "Calendar"
framework: "jQuery"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/jquery/calendar/range-select"
---

# Date Range Picker - jQuery Calendar demo

Select a start/end date range from an inline JQuery calendar — set custom labels, range highlighting, and min/max range for booking or reservation. For jQuery or jQuery Mobile.

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

## Description

To enable range selection set the [`select`](https://mobiscroll.com/docs/jquery/datepicker/api#opt-select) option to `range`.

The microcopy for [`rangeStartLabel`](https://mobiscroll.com/docs/jquery/datepicker/api#localization-rangeStartLabel) and [`rangeEndLabel`](https://mobiscroll.com/docs/jquery/datepicker/api#localization-rangeEndLabel) can be easily overridden. For flight booking *"Outbound"* and *"Return"* makes sense while for accommodation booking *"Check in"* and *"Check out"* might be more appropriate.

The range start/end labels can also be hidden in some cases if needed. Use the [`showRangeLabels`](https://mobiscroll.com/docs/jquery/datepicker/api#opt-showRangeLabels) option for that.

Furthermore, you have the option to toggle the range highlight with the [`rangeHighlight`](https://mobiscroll.com/docs/jquery/datepicker/api#opt-rangeHighlight) option, if needed.

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

Dynamically switching between single, multiple or range select can be done with option changes.

**Looking for more range picker?** [Learn how to customize range selection →](https://demo.mobiscroll.com/jquery/range)

## 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.
- **Range highlighting** The configuration panel to the left of the calendar includes an enabled switch for highlighting the complete selected range or only its start and end dates.
- **Range labels** The panel includes controls for showing or hiding the start and end labels and for replacing the localized labels with custom text. Labels are shown by default, while custom labels are disabled by default.
- **Range length** 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

### Highlight the selected range or only start/end dates

- [x] Highlight selected range

### Customize the start & end labels

- [x] Show range labels
- [ ] Override localized labels with custom text

Show `Outbound` for the start label

Show `Return` for the end label

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

- [ ] Minimum length of

`3`

days

- [ ] Maximum length of

`10`

days

```js
$('#picker').mobiscroll().datepicker({
    select: 'range',
    rangeHighlight: true
    showRangeLabels: true
});
```

With "Minimum length of" on:

```js
$('#picker').mobiscroll().datepicker({
    select: 'range',
    rangeHighlight: true
    showRangeLabels: true,
    minRange: 3
});
```

With "Maximum length of" on:

```js
$('#picker').mobiscroll().datepicker({
    select: 'range',
    rangeHighlight: true
    showRangeLabels: true,
    maxRange: 10
});
```

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

## Code

### JS

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

$(function () {
  $('#demo-range-selection')
    .mobiscroll()
    .datepicker({
      controls: ['calendar'],
      display: 'inline',
      select: 'range',
      showRangeLabels: true,
    });
});
```

### HTML

```html
<div id="demo-range-selection"></div>
```

## Implementation notes

- Use `controls: ['calendar']`, `display: 'inline'`, and `select: 'range'`.
- Set `rangeHighlight: true` to shade the full range between start and end; when `false`, only the start/end dates themselves are visually marked.
- Set `showRangeLabels: true` to display "Start"/"End" style labels on the selected boundary dates; override the default wording with `rangeStartLabel`/`rangeEndLabel` (e.g. `'Outbound'`/`'Return'`), and the placeholder text shown before a value is picked with `rangeStartHelp`/`rangeEndHelp` - leaving these unset falls back to the localized defaults.
- Set `minRange`/`maxRange` to constrain how short/long the selected range can be - a number of days for a date-only selection, or milliseconds when the picker includes a time part.
- These are plain reactive props/bindings in React, Vue, and Angular; in JS/jQuery update them at runtime via `setOptions({ rangeHighlight, showRangeLabels, rangeStartLabel, rangeEndLabel, minRange, maxRange })` on the instance.

## 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: [Week Picker](https://demo.mobiscroll.com/jquery/calendar/week-select.md) - Pick a full week or a custom number of weeks in a JQuery date picker — configure the first day and selection size (1, 2, or 3 weeks).
- Next: [Date Formats](https://demo.mobiscroll.com/jquery/calendar/date-object-ISO-8601-moment.md) - Use a JQuery calendar date picker that accepts JS Date objects, ISO 8601 strings, and Moment.js objects.