The date & time picker supports single, multiple & range selection with mobile & desktop optimized rendering and interaction model.
Use it as a scroller and dropdown. Easily switch between scroller and calendar view or single and range selection.
The capabilities like built-in validation, minimum, maximum values, disabled dates are supported by both the scroller and calendar.
Use the date & time for both mobile and desktop or set it up responsively.
The main difference between the two rendering modes is how the picker is laid out. Set the touchUi option to false and the component shows up suitable for larger screens and pointer interaction while setting it to true renders it suitable for touch screens.
Use the date picker on an existing form field, custom input, ion-input or use it on Mobiscroll form fields. You can also embed it directly into your page.
When linked to an input, the component will be shown on focus or when someone clicks on the field. Alternatively, you can leave the input editable and show the component only on a button click.
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 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.
The date picker ships with five built-in variations for rendering the UI. The controls option supports the following:
date - renders a date-only scroller or dropdown control
time - renders a time-only scroller or dropdown control
timegrid - renders a time grid for time selection
datetime - renders a date & time scroller or dropdown
calendar - renders a calendar view for date picking
Use controls: ['datetime'] for rendering a date & time picker within the same control, tied to the same input, or use them separately for two inputs - controls: ['date'] and controls: ['time']. It will render a scrollers for touchUi: true and a dropdowns for touchUi: false.
To enable range selection set the select option to range.
The microcopy for rangeStartLabel and rangeEndLabel can be easily overridden. For flight booking "Outbound" and "Return" makes sense while for accommodation booking "Check in" and "Check out" might be more appropriate.
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, min/max - 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 option.
Values can change in a couple of different ways: through defaults, interacting with the UI or programmatically. The date and time picker defaults to now, which can be easily overridden with the defaultSelection setting.
The values are set by interacting with the component and making a selection or it can be done programmatically with the setVal method.
Use the buttons setting for showing/hiding set, cancel or add custom buttons.
The date picker works with local times by default, but ships with support for changing the timezone. The conversions and correct output relies on either of the two external libraries: luxon or moment-timezone. For installing and using these libraries check out this guide.
There are two angles regarding timezones:
dataTimezone - the datepicker expects this format and returns this format. It is 'local' by default if the date-times don't contain any timezone information
displayTimezone - the datepicker displays everything in this timezone. The date-times will be converted from the dataTimezone and displayed accordingly. It is 'local' by default
Invalid date-times will be interpreted in dataTimezone when they contain no timezone info and will be shown in displayTimezone on the wheels.
Configuring minimum and maximum selectable values is great for reducing mistakes. Help people by limiting the selections for the task at hand. Use the min and max options to restrict the selection.
Setting the values will disable dates/times earlier than min and dates/times that come after max.
Disable recurring days, set marked or colored days with the help of the recurring object. Learn how to configure daily, weekly, monthly and yearly recurring dates and pass a rule in the recurring property under the invalid option. Exceptions for specific and recurring days can be configured.
Use the configurator to experiment, build strings and objects that you can grab and use.
All components are fully localized.
In case of the date picker this covers date and time format, button copy, rtl and more.
You can see how each example shows up by clicking on the small flag icon or checking the examples below.