---
title: "Javascript Range Initializing the Picker Example | Mobiscroll"
component: "Range"
framework: "JavaScript"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/javascript/range/usage-on-input-or-inline"
---

# Initializing the Picker - JavaScript Range demo

Use the Javascript date range picker on a single input, two separate start/end inputs, or inline on the page — no input required. Plain JavaScript API.

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

## Description

The range picker can be used on a Mobiscroll input or any other input part of an existing form.

There are three ways to use the range picker:

- Initialize it on a single input, either Mobiscroll or non-Mobisroll input.
- Use it with two separate inputs of any type, one for `start` and another for `end`
- Embed the picker without an input. This can be the page itself or a more complex popup

## What this demo shows

- Shows three date range picker examples for selecting a date range: using a single input, separate start and end inputs, or an inline picker.
- **Date range picker with inputs** The first example opens the range picker when the user focuses or clicks the input. The second uses two separate inputs, one for the range start and one for the range end.
- **Input behavior** In the input-based examples, the range picker opens at the bottom of the container over a darkened backdrop. Clicking outside the picker closes it.
- **Inline date picker** The third example embeds the date range picker directly in the page without an input by using inline display mode.
- **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.
- **Footer actions** In the input-based examples, 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** In the input-based examples, confirming a date range with `Set` displays the selected range in the input using a month, day, and year format.

## Best for

- **Booking and reservations** Selecting start and end dates for hotels, rentals, appointments, or other reservation flows.
- **Travel planning** Choosing arrival and departure dates for trips and accommodation.
- **Date-based filtering** Filtering reports, analytics, or other data by a specific date range.
- **Separate date inputs** Forms that require dedicated inputs for the start and end dates.
- **Inline date selection** Interfaces where the date range picker needs to remain permanently visible on the page.

## Tutorial

### Range picker with one input

Initialize it on any input, like a new mobiscroll field or an existing field from your form.

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

```js
mobiscroll.datepicker('#range', {
    select: 'range'
});
```

### Range picker 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', {
    select: 'range',
    startInput: '#start',
    endInput: '#end'
});
```

### Embeddable range picker

It can be embedded into the page or a popup as an inline picker by setting the `display` option to `inline`. You can choose to initialize the picker on an `input type="hidden"` or just simply a div.

```html
<div id="range"></div>
```

```js
mobiscroll.datepicker('#range', {
    select: 'range',
    display: 'inline'
});
```

## 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
- [`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-one-input', {
  controls: ['calendar'],
  select: 'range',
  display: 'anchored',
});

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

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

### HTML

```html
<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-init-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-init-end" mbsc-input data-input-style="outline" data-label-style="stacked" placeholder="Please select..." />
            </label>
        </div>
    </div>
</div>
<div id="demo-init-inline"></div>
```

## Implementation notes

- Set `select: 'range'` on `Datepicker` to enable range selection; `controls: ['calendar']` restricts it to the calendar-only mode used in this demo.
- Single-input mode is the default - no extra option is needed. In React/Vue, pass an external element via `inputComponent` (e.g. `inputComponent="input"`) to render the picker on a plain `<input>` instead of the generated Mobiscroll input; in Angular, apply `mbsc-datepicker` directly as a directive on an existing `<input>`; in JS/jQuery, initialize the picker on the existing input element's selector/id.
- Two-input mode is set with `startInput`/`endInput`: in JS/jQuery these take a selector string (`startInput: '#start', endInput: '#end'`); in React/Vue they take input element/ref values (`startInput={start}`, `:startInput="startInput"`); in Angular they take template reference variables (`[startInput]="start"`, `[endInput]="end"` bound to `#start`/`#end` on `mbsc-input` elements).
- Embedding without an input is done with `display: 'inline'`, which renders the calendar directly in the page or a container instead of anchoring it to an input.
- `showRangeLabels: true` displays the Start/End clickable input labels above the calendar header when using range selection.

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

- Previous: [Mobile and Desktop](https://demo.mobiscroll.com/javascript/range/mobile-desktop-usage.md) - See how the Javascript date range picker renders on touch screens versus desktop — link it to a form field or custom input, or embed it inline.
- Next: [Responsive Layout](https://demo.mobiscroll.com/javascript/range/responsive.md) - Configure the Javascript date range picker to adapt to screen size — show one month on mobile and two on larger screens using built-in breakpoints.