Date & Time for Javascript
Learn moreDate & time scroller component for date, time selection or a combination of both.
Compatible with mobiscroll forms, custom inputs and more. Use it on any touch screen, no matter if small or large.
Shipping with useful features for a refined UX, including:
- Usage on mobile and tablet
- Date-only, time-only or mixed modes
- Steps for display values
- Hide wheels that are not needed
- Validation with disabled dates, min & max for restricting selection
- Circular wheels
- Multiple theme support
- Modal, popup and inline display mores
- RTL Support
- Full localization
Date & Time - Mobile & Desktop usage
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.
Date & Time - App & Website usage
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.
Date & Time - Date object, ISO 8601 & moment.js
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', localized date strings - '04/25/2010 8:15 AM' and moment.js objects - moment([2018, 3, 27, 12, 15]).
Date & Time - Mobile display modes
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.
Date & Time - Desktop display modes
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.
Date & Time - Responsive behavior
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.
Date & Time - Date picker
Use the component for date selection and only show the day, month and year wheels.
Use the dateFormat and dateWheel settings to customize the experience.
Check out some great examples for custom formats and for hiding the day resulting in a month/year picker.
Use the same component but different configuration for time and date-time selection.
Once we started using Mobiscroll, our conversions have improved and the experience became much more delightful!
Daniel Maldonado, Sr. Web Designer, Ecommission Financial Services
Date & Time - Time-only picker
Use the component for time selection with wheels for hours, minutes and seconds.
Control the format - timeFormat and wheels - timeWheels and switch between AM/PM or 24h formats.
Check out some great examples for custom formats.
Use the same component but different configuration for date and date-time selection.
Date & Time - Date & time picker
Use the component for a combined date & time picker. Select a day, month, year along with hour and minutes on separate wheels or have the date on a single wheel and the time on separate wheels.
Show the date and time in localized formats or customize it to your needs. Take a look at some of the formatting options available.
Besides the combined view you can use it as a date-only and time-only picker.
Date & Time - Month and year picker
Customize the wheels and format the date picker for month & year. Choose a month/year format for credit card expiration date.
This and even more can be done with the dateWheels setting.
Date & Time - Min & max values
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.
Date & Time - Setting invalids
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.
Date & Time - Time value steps
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.
Date & Time - Setting values
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.
Date & Time - Formatting values
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.
Date & Time - RTL Support
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.
Date & Time - Calendar systems
The event calendar supports multiple calendar systems. You can control it with the calendarSystem setting, and it supports the following options:
- Gregorian - it is included by default
- Jalali - it is the default system of the Persian calendar and is inlcuded within the Farsi language pack
- Hijri - it is included in the Arabic language pack
Date & Time - Localization
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.
Date & Time - Event hooks
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.
EVENTS FIRED:
Date & Time - Theming capabilities
Customize the look and feel with themes or custom CSS. There are four levels of customization:
- Base themes: Choose between
Mobiscroll,iOS,Android MaterialandWindows. - Light or dark: Every theme has a
lightanddarkvariant. Setting thethemeVariantto'auto'will switch based on system settings. - Custom themes: Use the theme builder to customize the colors and make it match your brand.
- Custom CSS: If you need further customization, the sky is the limit with CSS overrides.
You can also see how every example looks by changing the theme in the floating action bar on the right side.
Looking for something you didn't see or have a sales question?
Ask us about it, we're here to help.