---
title: "JQuery Range Understanding Controls Example | Mobiscroll"
component: "Range"
framework: "jQuery"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/jquery/range/calendar-scroller-dropdown"
---

# Understanding Controls - jQuery Range demo

Build a JQuery date range picker with switchable calendar view, date scroller, and datetime dropdown — adapts to mobile scroller or desktop dropdown.

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

## Description

The picker supports multiple controls:

- **Calendar view** - can be used on its own or combined with a time scroller
- **Date picker** - can be used separately or together with a time picker as a scroller on mobile and as a dropdown on desktop
- **Time picker** - can be used separately or together with a date picker or calendar
- **Datetime picker** - can be used as a scroller on mobile and as a dropdown on desktop

Use the [`controls` option](https://mobiscroll.com/docs/jquery/datepicker/api#opt-controls) (expecting an array) to configure the picker.

## What this demo shows

- Shows five range picker examples for selecting a start and end date, time or date and time.
- **Calendar view** The first example opens a calendar view for range selection.
- **Input behavior** The range picker opens at the bottom of the input over a darkened backdrop. Clicking outside the picker closes it.
- **Start and end inputs** Clickable inputs appear above the 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.
- **Date picker** The second example renders a date scroller for touch and a dropdown for pointer interaction.
- **Date and time picker** The third example renders a compact (one wheel) date picker with time. The scroller can be used with touch interaction on mobile and the dropdown for pointer interaction on desktop.
- **Calendar and time picker** The fourth example renders a combined view of a calendar and time scroller/dropdown for date and time range selection.
- **Time picker** The fifth example renders a time scroller for touch and a dropdown for pointer interaction. The time format comes from the locale option that can be overridden.
- **Footer actions** The gray `Cancel` button discards the change, while the blue `Set` button confirms the selected date range. Until a range is selected, the `Set` button remains inactive.
- **Input value** Confirming a date with `Set` displays the selected 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, or other accommodations.
- **Appointment scheduling** Define a start and end date or time for appointments, meetings, or reservations.
- **Event planning** Select the start and end date and time for multi-day or timed events.
- **Reporting and analytics** Choose a date range for filtering reports, dashboards, or historical data.
- **Availability and working hours** Define time ranges for shifts, opening hours, or employee availability.
- **Rental and reservation periods** Select precise date and time ranges for cars, equipment, rooms, or other bookable resources.

## Tutorial

### Calendar view

Renders a calendar view for range selection.

```js
{
    controls: ['calendar'],
    select: 'range',
    touchUi: true
}
```

### Date picker

Renders a date scroller for touch and a dropdown for pointer interaction.

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

### Date and time picker

Renders a compact (one wheel) date picker with time. The scroller can be used with touch interaction on mobile and the dropdown for pointer interaction on desktop.

```js
{
    controls: ['datetime'],
    select: 'range',
    touchUi: true
}
```

### Calendar and time picker

Renders a combined view of a calendar and time scroller/dropdown for date and time range selection.

```js
{
    controls: ['calendar', 'time'],
    select: 'range',
    touchUi: true
}
```

### Time picker

Renders a time scroller for touch and a dropdown for pointer interaction. The time format comes from the `locale` option that can be overridden.

```js
{
    controls: ['time'],
    select: 'range',
    touchUi: true
}
```

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

## Code

### JS

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

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

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

  $('#demo-datetime')
    .mobiscroll()
    .datepicker({
      controls: ['datetime'],
      select: 'range',
    });

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

  $('#demo-time')
    .mobiscroll()
    .datepicker({
      controls: ['time'],
      select: 'range',
    });
});
```

### HTML

```html
<label>
    Calendar
    <input id="demo-calendar" mbsc-input data-input-style="outline" data-label-style="stacked" placeholder="Please select..." />
</label>

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

<label>
    Date & Time
    <input id="demo-datetime" mbsc-input data-input-style="outline" data-label-style="stacked" placeholder="Please select..." />
</label>

<label>
    Calendar & Time
    <input id="demo-calendar-time" mbsc-input data-input-style="outline" data-label-style="stacked" placeholder="Please select..." />
</label>

<label>
    Time
    <input id="demo-time" mbsc-input data-input-style="outline" data-label-style="stacked" placeholder="Please select..." />
</label>
```

## Implementation notes

- Set `select: 'range'` on every variant; `controls` determines which UI renders: `['calendar']` (month grid), `['date']` (date scroller/dropdown), `['datetime']` (compact one-wheel date+time scroller/dropdown), `['calendar', 'time']` (calendar plus a time scroller/dropdown), `['time']` (time scroller/dropdown only).
- `touchUi` (boolean) controls whether the `date`, `datetime`, and `time` control types render as a scroller (touch) or a dropdown (pointer); it has no effect on the `calendar` control.
- Set `showRangeLabels: true` to show the range start/end labels above the picker for any control combination.
- The time format for `['time']` and `['datetime']` controls is taken from the active `locale` option and can be overridden by passing a custom `locale`.
- The same `Datepicker` component/options accept any `controls` combination - no separate component is needed per view.

## 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: [Responsive Layout](https://demo.mobiscroll.com/jquery/range/responsive.md) - Configure the JQuery date range picker to adapt to screen size — show one month on mobile and two on larger screens using built-in breakpoints.
- Next: [Display Modes](https://demo.mobiscroll.com/jquery/range/mobile-desktop-display.md) - Configure how the JQuery range picker appears — inline embed, anchored to an input, or modal — for mobile and desktop layouts.