---
title: "Javascript Range Date Range Picker Example | Mobiscroll"
component: "Range"
framework: "JavaScript"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/javascript/range/date-range"
---

# Date Range Picker - JavaScript Range demo

Set up a Javascript date range picker as a calendar view or date scroller — inline or in a popup, with one or two inputs. Plain JS api for usage everywhere.

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

## Description

Set up the range picker for date pair selection. Regardless if you are interested in the start/end date or the actual range, you have several possibilities of rendering a date range picker. The `controls` option supports different values:

- `calendar` - will render a calendar view for date range selection
- `date` - will render a date scroller or dropdown for date range selection
- `datetime` - will render a compact date scroller or dropdown with time picker for date & time range selection ([explore date & time ranges](https://demo.mobiscroll.com/javascript/range/date-time-range))
- `time` - will render a time picker for range selection ([explore time ranges](https://demo.mobiscroll.com/javascript/range/time-range))
- `timegrid` - will render a time grid for range selection ([explore time ranges](https://demo.mobiscroll.com/javascript/range/time-range))

## What this demo shows

- Shows five range picker examples for selecting start and end dates.
- **Inline calendar** The first example displays two months in an inline calendar for range selection.
- **Inline date scroller** The second example uses an inline date scroller designed for touch interaction.
- **Preset date range** The third example displays a two-month inline calendar with preset selection parameters instead of unrestricted start and end date selection.
- **Input-triggered calendar** The fourth example opens a two-month range calendar below an input when the input is clicked.
- **Separate start and end inputs** The fifth example uses separate inputs for the start and end dates and opens a two-month range calendar for each input.
- **Popup behavior** Clicking outside the picker closes it.
- **Start and end controls** Clickable start and end 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.
- **Month view** A fixed weekday header displays 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 states** Hovering over a day highlights its number with a gray background. The first selected day sets the range start, and the second sets the range end. Selected days are highlighted in blue. The current date is highlighted by default and remains blue when another date is selected.
- **Footer actions** In the input-based examples, `Cancel` discards the change and `Set` confirms the selected date range. The `Set` button remains inactive until a complete range is selected.
- **Input value** Selecting `Set` displays the confirmed range in the input using a month, day, and year format.

## Best for

- **Travel bookings** Select check-in and check-out dates for hotels, rentals, and other accommodations.
- **Appointment scheduling** Define start and end dates for appointments, meetings, and reservations.
- **Event planning** Select start and end dates for multi-day events.
- **Reporting and analytics** Choose a date range for filtering reports, dashboards, and historical data.

## Tutorial

### Date range with a calendar view

One of the most common ways to represent date range selection is through a calendar view with one or more months. Learn about how to [configure and customize the calendar](https://demo.mobiscroll.com/javascript/range/week-month-view-scrolling-direction).

```js
{
    controls: ['calendar'],
    select: 'range',
    calendarType: 'month',
    pages: 2,
    display: 'inline',
    touchUi: true
}
```

### Date range with a scroller/dropdown

Passing `date` to the `controls` option renders a date scroller or dropdown with [customizable start and end labels](https://demo.mobiscroll.com/javascript/range/customizing-labels-selection).

```js
{
    controls: ['date'],
    select: 'range',
    display: 'inline',
    touchUi: true
}
```

### Pre-set date range

By setting the `select: 'preset-range'` you can pre-set the parameters of the selection rather than let people freely pick start/end dates. The first day and length can be set through the `firstSelectDay` and `selectSize` options.

```js
{
    controls: ['calendar'],
    select: 'preset-range',
    firstSelectDay: 2,
    selectSize: 10,
    display: 'inline',
    touchUi: true
}
```

### Using the range with one input

Besides rendering it inline, you can link the range to an input that can be a Mobiscroll input or an existing field. Explore [more ways to use the picker](https://demo.mobiscroll.com/javascript/range/usage-on-input-or-inline).

```html
<label>
    Range
    <input id="range" mbsc-input placeholder="Please select..." />
</label>
```

```js
mobiscroll.datepicker('#range', {
    controls: ['calendar'],
    select: 'range',
    calendarType: 'month',
    pages: 2,
    touchUi: true
});
```

### Using the range with two inputs

When using two separate inputs for `start` and `end`, you will want to initialize the component on the first input and make sure to pass the references of the two inputs through the `startInput` and `endInput` options.

```html
<div id="range"></div>
<label>
    Start
    <input id="start" mbsc-input placeholder="Please select..." />
</label>
<label>
    End
    <input id="end" mbsc-input placeholder="Please select..." />
</label>
```

```js
mobiscroll.datepicker('#range', {
    controls: ['calendar'],
    select: 'range',
    startInput: '#start',
    endInput: '#end',
    calendarType: 'month',
    pages: 2,
    touchUi: true
});
```

## 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
- [`calendarType`](https://mobiscroll.com/docs/javascript/datepicker/api#opt-calendarType) - option
- [`pages`](https://mobiscroll.com/docs/javascript/datepicker/api#opt-pages) - option
- [`display`](https://mobiscroll.com/docs/javascript/datepicker/api#opt-display) - option
- [`firstSelectDay`](https://mobiscroll.com/docs/javascript/datepicker/api#opt-firstSelectDay) - option
- [`selectSize`](https://mobiscroll.com/docs/javascript/datepicker/api#opt-selectSize) - option
- [`startInput`](https://mobiscroll.com/docs/javascript/datepicker/api#opt-startInput) - option
- [`endInput`](https://mobiscroll.com/docs/javascript/datepicker/api#opt-endInput) - option

## Code

### JS

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

mobiscroll.datepicker('#demo-calendar', {
  controls: ['calendar'],
  select: 'range',
  calendarType: 'month',
  pages: 2,
  display: 'inline',
});

mobiscroll.datepicker('#demo-date', {
  controls: ['date'],
  select: 'range',
  display: 'inline',
});

mobiscroll.datepicker('#demo-range-presets', {
  controls: ['calendar'],
  select: 'preset-range',
  display: 'inline',
  pages: 2,
  firstSelectDay: 2,
  selectSize: 10,
});

mobiscroll.datepicker('#demo-one-input', {
  controls: ['calendar'],
  select: 'range',
});

mobiscroll.datepicker('#demo-start-end', {
  controls: ['calendar'],
  select: 'range',
  startInput: '#demo-start',
  endInput: '#demo-end',
});
```

### HTML

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

<div id="demo-date"></div>

<div id="demo-range-presets"></div>

<label>
    Range
    <input id="demo-one-input" mbsc-input data-input-style="outline" data-label-style="stacked" placeholder="Please select..." />
</label>

<div id="demo-start-end"></div>
<div class="mbsc-grid mbsc-no-padding">
    <div class="mbsc-row">
        <div class="mbsc-col-6">
            <label>
                Start
                <input id="demo-start" mbsc-input data-input-style="outline" data-label-style="stacked" placeholder="Please select..." />
            </label>
        </div>
        <div class="mbsc-col-6">
            <label>
                End
                <input id="demo-end" mbsc-input data-input-style="outline" data-label-style="stacked" placeholder="Please select..." />
            </label>
        </div>
    </div>
</div>
```

## Implementation notes

- Set `select: 'range'` with `controls: ['calendar']` for a calendar-grid range picker, or `controls: ['date']` for a date scroller/dropdown range picker.
- On the calendar variant, set `calendarType: 'month'` with `pages: 2` to show two months side by side; `display: 'inline'` embeds it directly on the page, while omitting `display` (or using `'anchored'`) opens it below an input.
- Use `select: 'preset-range'` instead of `select: 'range'` to constrain selection to a fixed-length window rather than free start/end picking; `firstSelectDay` sets which day of the range is clickable to anchor the selection, and `selectSize` sets the fixed number of days in the range.
- To drive the picker from two separate fields instead of one, pass `startInput`/`endInput`: React/Vue pass input element refs, Angular passes template reference variables via `[startInput]`/`[endInput]`, and JS/jQuery pass CSS selector strings (e.g. `'#start'`, `'#end'`).
- `touchUi` controls whether the scroller/dropdown variants render as a scroller (touch) or dropdown (pointer); it has no effect on the calendar-grid variant.

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

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: [Time Range Picker](https://demo.mobiscroll.com/javascript/range/time-range.md) - Select start and end times with the Javascript time range picker — inline scroller, time grid, or single/split input layouts for any form design. Plain JS api for usage everywhere.