---
title: "Javascript Range Display Modes Example | Mobiscroll"
component: "Range"
framework: "JavaScript"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/javascript/range/mobile-desktop-display"
---

# Display Modes - JavaScript Range demo

Configure how the Javascript range picker appears — inline embed, anchored to an input, or modal — for mobile and desktop layouts. Plain JS api for usage everywhere.

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

## Description

The range has five built-in display modes that can be controlled through the [`display` option](https://mobiscroll.com/docs/javascript/datepicker/api#opt-display):

- `top` - modal that slides down from the top
- `bottom` - modal that slides up from the bottom
- `center` - modal that shows up in the middle with a pop animation
- `anchored` - modal that shows up anchored to an input or any dom element
- `inline` - embeddable picker that is rendered into the markup without its own modal

Use the [`touchUi` option](https://mobiscroll.com/docs/javascript/datepicker/api#opt-touchUi) to switch between touch optimized mobile rendering and pointer optimized desktop rendering. It can be dynamically switched with the help of the `responsive` option.

The defaults change on a theme to theme basis. The `ios` theme comes with `bottom` on mobile and `anchored` on desktop while the `material` and `windows` themes have `center` on mobile and `anchored` on desktop.

**Want to see how to set up responsiveness?** [Check out the previous example →](https://demo.mobiscroll.com/javascript/range/responsive)

## What this demo shows

- Shows five range picker examples for selecting a start and end date, time or date and time with the supported display modes.
- **Control selection** A segmented control above the range pickker allows the user to change the range picker control, by default the calendar is selected, but they can pick from a date with scroller a date and time or a simple date controls.
- **Inline date picker** The inline example embeds the range picker directly in the page without an input or modal.
- **Anchored date picker** The anchored example opens from an input and positions the picker next to that input or another DOM element.
- **Top date picker** The top example opens in a modal that slides down from the top.
- **Bottom date picker** The bottom example opens in a modal that slides up from the bottom.
- **Center date picker** The center example opens in the middle of the viewport with a pop animation.
- **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.
- **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

- **Inline layouts** Keep the range picker visible in booking flows, forms, dashboards, or side panels where users need direct access to range selection.
- **Anchored desktop forms** Open the picker next to an input or another page element when the surrounding form should remain visible.
- **Top-aligned mobile flows** Use a modal that enters from the top when the range picker should follow a top-oriented mobile layout.
- **Bottom-aligned mobile flows** Use a modal that enters from the bottom for touch-oriented interfaces and bottom-sheet interaction patterns.
- **Focused modal tasks** Center the picker when range selection should appear as a distinct task in the middle of the viewport.

## Tutorial

### Select the controls

- (x) Calendar
- ( ) Date with scroller
- ( ) Date & Time
- ( ) Time

```js
{
    controls: ['calendar'],
    display: 'inline',
    touchUi: true
}
```

With "Date with scroller":

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

With "Date & Time":

```js
{
    controls: ['datetime'],
    display: 'inline',
    touchUi: true
}
```

With "Time":

```js
{
    controls: ['time'],
    display: 'inline',
    touchUi: true
}
```

```js
{
    controls: ['calendar'],
    display: 'anchored',
    touchUi: true
}
```

With "Date with scroller":

```js
{
    controls: ['date'],
    display: 'anchored',
    touchUi: true
}
```

With "Date & Time":

```js
{
    controls: ['datetime'],
    display: 'anchored',
    touchUi: true
}
```

With "Time":

```js
{
    controls: ['time'],
    display: 'anchored',
    touchUi: true
}
```

```js
{
    controls: ['calendar'],
    display: 'top',
    touchUi: true
}
```

With "Date with scroller":

```js
{
    controls: ['date'],
    display: 'top',
    touchUi: true
}
```

With "Date & Time":

```js
{
    controls: ['datetime'],
    display: 'top',
    touchUi: true
}
```

With "Time":

```js
{
    controls: ['time'],
    display: 'top',
    touchUi: true
}
```

```js
{
    controls: ['calendar'],
    display: 'bottom',
    touchUi: true
}
```

With "Date with scroller":

```js
{
    controls: ['date'],
    display: 'bottom',
    touchUi: true
}
```

With "Date & Time":

```js
{
    controls: ['datetime'],
    display: 'bottom',
    touchUi: true
}
```

With "Time":

```js
{
    controls: ['time'],
    display: 'bottom',
    touchUi: true
}
```

```js
{
    controls: ['calendar'],
    display: 'center',
    touchUi: true
}
```

With "Date with scroller":

```js
{
    controls: ['date'],
    display: 'center',
    touchUi: true
}
```

With "Date & Time":

```js
{
    controls: ['datetime'],
    display: 'center',
    touchUi: true
}
```

With "Time":

```js
{
    controls: ['time'],
    display: 'center',
    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
- [`display`](https://mobiscroll.com/docs/javascript/datepicker/api#opt-display) - option

## Code

### JS

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

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

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

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

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

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

### HTML

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

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

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

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

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

## Implementation notes

- Set the `display` option to `'inline'`, `'anchored'`, `'top'`, `'bottom'`, or `'center'` to control how the range picker is rendered relative to its trigger.
- Use `touchUi: true`/`false` to switch between touch-optimized (larger, scroller-friendly) and pointer-optimized (compact, mouse-friendly) rendering, independent of `display`.
- `controls` can be set to `['calendar']`, `['date']` (calendar with scroller), `['date', 'time']`, or `['time']` to change which picker control renders inside any of the five display modes, and can be updated at runtime via `setOptions` without recreating the instance.
- Pass a `context` selector/element so a non-inline `display` mode (e.g. `'top'`, `'bottom'`, `'center'`) constrains its modal/overlay to a specific container instead of the whole viewport.
- Default `display` values differ by theme: the `ios` theme defaults to `'bottom'` on mobile and `'anchored'` on desktop, while `material`/`windows` default to `'center'` on mobile and `'anchored'` on desktop - set `display` and `touchUi` explicitly to override the theme default, or combine with the `responsive` option to switch them automatically by breakpoint.
- Across frameworks `display`/`touchUi`/`controls` are passed the same way as any other option: React/Vue/Angular as props/bindings on the picker component, JS/jQuery as keys in the options object passed to `mobiscroll.datepicker()`/`.mobiscroll().datepicker()`.

## 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: [Understanding Controls](https://demo.mobiscroll.com/javascript/range/calendar-scroller-dropdown.md) - Build a Javascript date range picker with switchable calendar view, date scroller, and datetime dropdown — adapts to mobile scroller or desktop dropdown.