--- title: "Javascript Range Responsive Layout Example | Mobiscroll" component: "Range" framework: "JavaScript" library_version: "6.1.5" url: "https://demo.mobiscroll.com/javascript/range/responsive" --- # Responsive Layout - JavaScript Range demo 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. Plain JavaScript API. - [Live demo](https://demo.mobiscroll.com/javascript/range/responsive) - [View code on GitHub](https://github.com/acidb/mobiscroll-demos-javascript/tree/main/src/demos/datepicker/range/responsive) - This demo in other frameworks: [jQuery](https://demo.mobiscroll.com/jquery/range/responsive.md), [Angular](https://demo.mobiscroll.com/angular/range/responsive.md), [React](https://demo.mobiscroll.com/react/range/responsive.md), [Vue](https://demo.mobiscroll.com/vue/range/responsive.md) ## Description The range picker has a liquid layout, which means it nicely adapts to its surroundings. There are times however when you would like to set up the component responsively. Use the [`responsive` option](https://mobiscroll.com/docs/javascript/datepicker/api#opt-responsive) to configure the picker and change the options based on the viewport width. There are five predefined breakpoints: - `xsmall` - min-width: 0px - `small` - min-width: 576px - `medium` - min-width: 768px - `large` - min-width: 992px - `xlarge` - min-width: 1200px - use `custom` for setting a custom `breakpoint` It is a good idea to change the `display` or `controls` option to tailor the UX. This way you can have a **single month calendar on mobile** and a **two month view on bigger screens**. ## What this demo shows - Shows a date range picker example for selecting a date range across touch and desktop layouts. - **Viewport switcher** A segmented control above the range picker switches between the demo's viewport presets. - **Small screen layout** At the `375px` viewport preset, the range picker opens at the center of the screen and shows one month. - **Medium screen layout** At the `576px` and `768px` viewport presets, the range picker opens at the center of the screen and shows two months. - **Large screen layout** At the `992px` and `1200px` viewport presets, the range picker opens at the center of the screen, shows two months and the `touchUi` option is disabled. - **Range picker input** Focusing or clicking the input opens the picker. - **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 with `Set` displays the selected range in the input using a month, day, and year format. ## Best for - **Appointment booking** Letting users choose an appointment date range from phones, tablets, or desktop computers. - **Travel and accommodation forms** Providing a date range picker that adapts to the available screen size when selecting departure, arrival, or check-in dates. ## Tutorial ```js responsive: { xsmall: { display: 'center', pages: 1, touchUi: true }, medium: { display: 'center', pages: 2, touchUi: true }, custom: { // Custom breakpoint breakpoint: 850, display: 'center', pages: 2, touchUi: false } } ``` ## 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 - [`showRangeLabels`](https://mobiscroll.com/docs/javascript/datepicker/api#opt-showRangeLabels) - option - [`responsive`](https://mobiscroll.com/docs/javascript/datepicker/api#opt-responsive) - option - [`display`](https://mobiscroll.com/docs/javascript/datepicker/api#opt-display) - option - [`touchUi`](https://mobiscroll.com/docs/javascript/datepicker/api#opt-touchUi) - option ## Code ### JS ```js mobiscroll.setOptions({ theme: 'ios', themeVariant: 'light' }); mobiscroll.datepicker('#demo-responsive', { controls: ['calendar'], select: 'range', showRangeLabels: true, responsive: { xsmall: { display: 'bottom', }, small: { display: 'anchored', }, custom: { // Custom breakpoint breakpoint: 800, display: 'anchored', touchUi: false, }, }, }); ``` ### HTML ```html ``` ## Implementation notes - Set `controls: ['calendar']`, `select: 'range'`, and `showRangeLabels: true` on the `Datepicker`, then pass a `responsive` object keyed by breakpoint. - Predefined breakpoint keys are `xsmall` (min-width 0), `small` (576px), `medium` (768px), `large` (992px), and `xlarge` (1200px); a `custom` key requires its own `breakpoint` (a pixel number). - Each breakpoint entry is a partial options object - typically overriding `display` (`'center'`/`'anchored'`/`'bottom'`), `pages` (month count), and `touchUi` - so the picker can show one month with `touchUi: true` on small screens and two months with `touchUi: false` on larger ones. - React passes `responsive` as a prop (``); Vue binds it with `:responsive="myResp"`; Angular binds it with `[responsive]="myResp"`; JS/jQuery pass `responsive` directly in the options object. - Breakpoint overrides can be combined with a `context` option (a container selector) so the responsive behavior is scoped to a specific element instead of the viewport. ## 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: [Initializing the Picker](https://demo.mobiscroll.com/javascript/range/usage-on-input-or-inline.md) - Use the Javascript date range picker on a single input, two separate start/end inputs, or inline on the page — no input required. - Next: [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.