--- title: "JQuery Date & Time Responsive behavior Example | Mobiscroll" component: "Date & Time" framework: "jQuery" library_version: "6.1.5" url: "https://demo.mobiscroll.com/jquery/datetime/responsive" --- # Responsive behavior - jQuery Date & Time demo Responsive JQuery date time picker. Define how it shows up across multiple screen sizes for touch and mouse interaction. For jQuery or jQuery Mobile. - [Live demo](https://demo.mobiscroll.com/jquery/datetime/responsive) - [View code on GitHub](https://github.com/acidb/mobiscroll-demos-jquery/tree/main/src/demos/datepicker/datetime/responsive) - This demo in other frameworks: [JavaScript](https://demo.mobiscroll.com/javascript/datetime/responsive.md), [Angular](https://demo.mobiscroll.com/angular/datetime/responsive.md), [React](https://demo.mobiscroll.com/react/datetime/responsive.md), [Vue](https://demo.mobiscroll.com/vue/datetime/responsive.md) ## Description The date & time 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/jquery/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 **bottom positioned calendar on mobile**, a **popover anchored to the input on tablet** and **desktop display on large screens**. ## What this demo shows - Shows a wheel-style date picker example for selecting a single date across touch and desktop layouts. - **Viewport switcher** A segmented control above the date picker switches between the demo's viewport presets. - **Small screen layout** At the `375px` viewport preset, the date picker opens at the bottom of the screen. - **Medium screen layout** At the `576px` and `768px` viewport presets, the date picker opens in a popover anchored to the input. - **Large screen layout** At the `992px` and `1200px` viewport presets, the date picker uses a desktop display. - **Date picker input** Focusing or clicking the input opens the picker. - **Date selection** Separate scrollable wheels let users select the month, day, and year. The selected values appear in a central selection area, while neighboring values remain visually subdued. - **Scrolling behavior** Users can scroll vertically through neighboring values to move between dates, including dates in other months or years. - **Footer actions** In the input-based examples, the gray `Cancel` button discards the change, while the blue `Set` button confirms the selected date. - **Input value** In the input-based examples, confirming a date with `Set` displays the selected value in the input using a month, day, and year format. ## Best for - **Appointment booking** Letting users choose an appointment date from phones, tablets, or desktop computers. - **Travel and accommodation forms** Providing a date picker that adapts to the available screen size when selecting departure, arrival, or check-in dates. - **Responsive business applications** Using a bottom-positioned date picker on small screens and an input-anchored popover when more space is available. ## Tutorial ```js responsive: { xsmall: { controls: ['date'], display: 'bottom', touchUi: true }, small: { controls: ['date'], display: 'anchored', touchUi: true }, custom: { // Custom breakpoint breakpoint: 800, controls: ['date'], display: 'anchored', touchUi: false } } ``` ```js responsive: { xsmall: { controls: ['date'], display: 'bottom', touchUi: true }, small: { controls: ['date'], display: 'anchored', touchUi: true }, custom: { // Custom breakpoint breakpoint: 800, controls: ['calendar'], display: 'anchored', touchUi: false } } ``` ## 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 - [`responsive`](https://mobiscroll.com/docs/jquery/datepicker/api#opt-responsive) - option - [`display`](https://mobiscroll.com/docs/jquery/datepicker/api#opt-display) - option - [`touchUi`](https://mobiscroll.com/docs/jquery/datepicker/api#opt-touchUi) - option ## Code ### JS ```js mobiscroll.setOptions({ theme: 'ios', themeVariant: 'light' }); $(function () { $('#demo-responsive-drop') .mobiscroll() .datepicker({ controls: ['date'], responsive: { xsmall: { display: 'bottom', }, small: { display: 'anchored', }, custom: { // Custom breakpoint breakpoint: 800, display: 'anchored', touchUi: false, }, }, }); $('#demo-responsive-cal') .mobiscroll() .datepicker({ responsive: { xsmall: { controls: ['date'], display: 'bottom', touchUi: true, }, small: { controls: ['date'], display: 'anchored', touchUi: true, }, custom: { // Custom breakpoint breakpoint: 800, controls: ['calendar'], display: 'anchored', touchUi: false, }, }, }); }); ``` ### HTML ```html ``` ## Implementation notes - Use the `responsive` option to configure per-breakpoint overrides; keys are the predefined breakpoints `xsmall` (min-width 0px), `small` (576px), `medium` (768px), `large` (992px), `xlarge` (1200px), or `custom` with an explicit `breakpoint` number. - Each breakpoint entry is a partial options object - commonly `display` (e.g. `'bottom'`, `'anchored'`, `'center'`) and `controls` (e.g. `['date']`, `['calendar']`) - plus `touchUi` to force wheel-style touch UI (`true`) or a compact desktop-style UI (`false`) regardless of viewport. - A typical pattern: `xsmall: { display: 'bottom', touchUi: true }`, `small: { display: 'anchored', touchUi: true }`, `custom: { breakpoint: 800, display: 'anchored', touchUi: false }` - bottom sheet on mobile, anchored popover on tablet, and a desktop-style anchored layout above the custom breakpoint. - `responsive` is a plain reactive prop/binding in React, Vue, and Angular; in JS/jQuery it's passed in the init config object and can be changed at runtime via `setOptions({ responsive: {...} })`. - Breakpoints only apply on window resize/reflow - there is no separate API for simulating a specific viewport width; `responsive` only reacts to the actual size of the container the picker is bound to. ## 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: [Initializing the picker](https://demo.mobiscroll.com/jquery/datetime/usage-on-input-or-inline.md) - JQuery date and time picker component with usage on inputs or directly embeddable on page or in complex modals. - Next: [Understanding display modes](https://demo.mobiscroll.com/jquery/datetime/mobile-desktop-display.md) - Embeddable JQuery date time picker for mobile and desktop with top, bottom, popup, center, modal, anchored positioning.