--- title: "JQuery Date & Time Date types Example | Mobiscroll" component: "Date & Time" framework: "jQuery" library_version: "6.1.5" url: "https://demo.mobiscroll.com/jquery/datetime/date-object-ISO-8601-moment" --- # Date types - jQuery Date & Time demo JQuery Date picker for mobile & desktop supporting data types: javascript date object, ISO 8601 strings and moment.js objects. - [Live demo](https://demo.mobiscroll.com/jquery/datetime/date-object-ISO-8601-moment) - [View code on GitHub](https://github.com/acidb/mobiscroll-demos-jquery/tree/main/src/demos/datepicker/datetime/date-object-ISO-8601-moment) - This demo in other frameworks: [JavaScript](https://demo.mobiscroll.com/javascript/datetime/date-object-ISO-8601-moment.md), [Angular](https://demo.mobiscroll.com/angular/datetime/date-object-ISO-8601-moment.md), [React](https://demo.mobiscroll.com/react/datetime/date-object-ISO-8601-moment.md), [Vue](https://demo.mobiscroll.com/vue/datetime/date-object-ISO-8601-moment.md) ## Description The date & time picker works with different date types: - **JS date object** - a common way of passing a date is through a Date object: `new Date(1995, 11, 17, 15, 24)` (make sure to not simply pass a date string to `new Date()`) - **ISO date string** - standardized way of passing dates: `'2008-09-15T15:53:00'` (make sure to pass it as a string) - **Moment.js object** - a great solution that solves common date management difficulties: `moment([2018, 3, 27, 12, 15])` (make sure to have moment.js loaded) When passing dates to the component - eg. [invalids](https://demo.mobiscroll.com/jquery/datetime/disabled-invalid-values), [min/max](https://demo.mobiscroll.com/jquery/datetime/min-max-restrictions) - you can do it in either format and the picker will automatically know what to do with it. If you want to specify how the picker should return values, you can do it in the [`returnFormat`](https://mobiscroll.com/docs/jquery/datepicker/api#opt-returnFormat) option. ## What this demo shows - An inline date picker for selecting a date from a wheel-style date picker. - **Inline date picker** The picker is shown directly in the page without an input by using inline display mode. - **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. - **Example panel** Three code snippets appear to the left of the picker, each demonstrating a supported date format. - **Supported formats** The examples use a `JS date object`, an `ISO date string`, and a `Moment.js object`. - **Navigate actions** Each code example includes a button that navigates the picker to a specific date using the corresponding format. - **Button labels** The buttons are labeled `Set JS date object`, `Set ISO string`, and `Set moment.js object`. - **Button interaction** Hovering over a button highlights it. Clicking the button navigates the picker to the example date. ## Best for - **Supported date inputs** Showing developers which date formats the date picker accepts and how each format can be used to navigate to a specific date. ## Tutorial ### JS date object ```js $('#cal').mobiscroll().datepicker({ returnFormat: 'jsdate' }); $('#cal').mobiscroll('setVal', new Date(2020, 10, 15, 10, 45)); $('#cal').mobiscroll('getVal'); // returns the selected date ``` ### ISO date string ```js $('#cal').mobiscroll().datepicker({ returnFormat: 'iso8601' }); $('#cal').mobiscroll('setVal', '2020-05-20T12:30:00')); $('#cal').mobiscroll('getVal'); // returns the selected date ``` ### Moment.js object ```js $('#cal').mobiscroll().datepicker({ returnFormat: 'moment' }); $('#cal').mobiscroll('setVal', moment([2020, 2, 6, 15, 30])); $('#cal').mobiscroll('getVal'); // returns the selected date ``` ## 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 - [`onChange`](https://mobiscroll.com/docs/jquery/datepicker/api#event-onChange) - event - [`returnFormat`](https://mobiscroll.com/docs/jquery/datepicker/api#opt-returnFormat) - option ## Code ### JS ```js mobiscroll.setOptions({ theme: 'ios', themeVariant: 'light' }); $(function () { var dateInstance = $('#demo-date') .mobiscroll() .datepicker({ controls: ['date'], onChange: function (event, inst) { updateValue('returnVal', inst); }, }) .mobiscroll('getInst'); var isoInstance = $('#demo-iso') .mobiscroll() .datepicker({ controls: ['date'], returnFormat: 'iso8601', onChange: function (event, inst) { updateValue('returnISO', inst); }, }) .mobiscroll('getInst'); var momentInstance = $('#demo-moment') .mobiscroll() .datepicker({ controls: ['date'], returnFormat: 'moment', onChange: function (event, inst) { updateValue('returnMoment', inst); }, }) .mobiscroll('getInst'); $('#setDate').click(function () { $('#demo-date').mobiscroll('setVal', new Date(2020, 10, 15, 10, 45), true); updateValue('returnVal', dateInstance); }); $('#setISO').click(function () { $('#demo-iso').mobiscroll('setVal', '2020-05-20T12:30:00', true); updateValue('returnISO', isoInstance); }); $('#setMoment').click(function () { // Make sure that moment js is loaded $('#demo-moment').mobiscroll('setVal', moment([2020, 2, 6, 15, 30]), true); updateValue('returnMoment', momentInstance); }); function updateValue(id, inst) { setTimeout(function () { if (id == 'returnMoment') { document.getElementById(id).innerHTML = inst.getVal().format(); } else { document.getElementById(id).innerHTML = inst.getVal(); } }); } }); ``` ### HTML ```html
Working with Js Date Objects
Return value:
Working with Date strings
Return value:
Working with Moment JS Objects
Return value:
``` ## Implementation notes - Use `controls: ['date']` and `display: 'inline'` on a single `Datepicker`; call `setVal(...)` on that instance to programmatically navigate to a date in any of the supported formats. - **JS date object** Calling `setVal(new Date(2020, 10, 15, 10, 45), ...)` combined with `returnFormat: 'jsdate'` (React/Vue/Angular/JS/jQuery all use the same `returnFormat` option name) makes `getVal()`/the bound value return a `Date` object. - **ISO date string** Calling `setVal('2020-05-20T12:30:00', ...)` with `returnFormat: 'iso8601'` returns the value as an ISO 8601 string; the string must be passed to `setVal`/the model as a string, not passed through `new Date()` first. - **Moment.js object** Calling `setVal(moment([2020, 2, 6, 15, 30]), ...)` together with `returnFormat: 'moment'` makes `getVal()`/the bound value return a Moment.js object. - React binds via `value`/`onChange` (`ev.value`) with `useState`; Angular/Vue use `[(ngModel)]="date"` / `v-model="date"` two-way binding; JS uses `cal.setVal(...)`/`cal.getVal()`; jQuery uses `$('#cal').mobiscroll('setVal', ...)`/`.mobiscroll('getVal')`. - `returnFormat` only controls the shape of the value handed back to the app - it does not change what input formats the picker accepts; dates, ISO strings, and Moment objects can all be passed in regardless of the configured `returnFormat`. ## 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: [Start-end selection](https://demo.mobiscroll.com/jquery/datetime/range-select.md) - JQuery date time range picker & scroller with customizable start/end dates, labels, min & max length, range highlight. - Next: [Formatting values](https://demo.mobiscroll.com/jquery/datetime/formatting-return-values.md) - JQuery Date & time picker with variable formats, AM/PM, 12h/24h. Inherited from localization with override possibility.