Use it for mobile, desktop and everything in between by setting it up responsively
(view responsive demo).
The component can be rendered for touch UI - great for smartphones and tablets - and for non-touch UI screens like laptop and desktops.
The main difference is that they are optimized for either touch or pointer interaction.
Use it on any custom input or with Mobiscroll form fields.
The component is triggered on input focus, but is can also be triggered on a button click.
Let’s say you already have a form and you want to enhance the date picking experience.
No problem, the date & time can be used on your existing fields. Most of our examples are presented using Mobiscroll form fields, but you get the picture.
The date & time picker supports multiple data types.
You can work with JS date objects - new Date(1995, 11, 17, 15, 24), ISO date strings - '2008-09-15T15:53:00' and moment.js objects - moment([2018, 3, 27, 12, 15]).
Depending on your requirements you can use different display modes for both mobile and desktop.
On mobile the component can be rendered either at the top or bottom of the screen, in the center of the screen,
anchored to an input or any object for that matter and it can also be embedded in any inline content.
Use the available display modes on mobile and desktop. On larger screens you have slightly different rendering options suitable for the large form-factor and pointer interaction.
Use the top, bottom and center modes for getting it in front of the users or stay in context and anchor it to the input.
Configure the date & time to behave and render differently on different sized screens.
You can have a bottom positioned date scroller on mobile, a popover anchored to the input on tablet and desktop display on large sceens.
All this can be configured under the responsive setting. Think of it as configuring how the settings change based on the screen-size.
Use the min and max settings to restrict selection.
This is useful to make the selection faster and to reduce user errors.
A great example is date of birth. You want to disable future dates and maybe add age verification? Simply restrict values up to 18 years in the past.
Disable dates with the invalid setting. It supports exact dates, ranges, recurring dates and weekdays.
Time can also be invalidated by passing exact values and ranges.
Using invalids is essential to a great UX. First make sure you have the min & max values right and then work your way back to invalids.
If you would like to re-enable dates inside an invalid range, you can do it with the valid setting.
Having it set up correctly not just enhances the UX, but improves performance.
Adjust the minute, hour steps in the time picker. By default it is incrementing by one, however you can change it to anything you’d like.
Need to pick values from every five minutes? You can do it with the steps setting.
Values can change a couple different ways: though defaults, intracting with the UI or programatically. The date and time picker defaults to now, which can be easily overridden with the defaultValue setting.
The values are set by interacting with the component and making a selection or it can be done programatically with the setVal method.
Use the buttons setting for showing/hiding set, cancel, clear, now or add custom buttons.
Set the date and time format accordingly. Formats are inherited from the localization settings, but can be overriden with the dateFomat, timeFormat settings. The scrollable wheels are controlled by the dateWheels and timeWheels settings.
Shipping with full RTL support, choose left-to-right or right-to-left with the rtl setting.
The value is inherited from the localization settings, and can be manually overriden by explicitly turning it ON and OFF.
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.
The date & time ships with different event hooks for deep customization. Events are triggered through the lifecycle of the component where you can tie in custom functionality and code.
While users interact with the UI events like onChange, onSet, onInit ... will be triggered.
Interact with the example and check the event log for the output.