All Collections
Training and guides
Date & Time
Main features of the date & time picker explained
Main features of the date & time picker explained

Everything you need to cover your date & time picking needs

Levi Kovacs avatar
Written by Levi Kovacs
Updated over a week ago

Mobiscroll Date & Time lets your users pick dates and times easily on a familiar UI. It makes the UX consistent across browsers and platforms.

What you get with the Mobile Date & Time picker

Date Picker

Enable date selection with a scroller-style control. You can use it for picking dates in the future or past and in various scenarios like selecting a date of birth, picking a date for an appointment or schedule.

Time Picker

Enable time selection with a scroller-style control that is familiar for your users. Use it to pick hours, minutes up to seconds, supporting multiple formats, like 12 hour or 24 hour format.

Date & Time Picker

Combine date and time selection with the Date & Time picker. Either with each date-part and time-part on its own wheel or have a combined scroller with date on one wheel and time on two to three wheels (like the iPhone picker).

Localization

Localize your UI with appropriate date format, time format, labels. Supporting RTL rendering for Right-to-left languages.

You can try the demos with different localization settings.

Validation

Help your users select the date and time they are looking for and minimize mistakes.

  • Min & Max: Set minimum and maximum values for boxing in the selection to a supported range. Picking a date of birth where users need to be 18 and above? Set a maximum date of today minus 18 years. View a live demo with min and max.

  • Invalids: Invalidate dates, times and ranges that your users don’t need to be able to select. Need to support office hours from 9 to 5? You can disable everything outside of it. View a live demo with invalids.

  • Default Values: Set default values that help the user get to the desired result faster.

Formatting values

Showing the values in the format people expect them in is key to a great user experience. Don’t alienate users with formats they don’t understand. Set date & time formats thought the API - supporting a wide variety of format strings, 12/24 hours, showing/hiding date and time wheels get to the result as fast as possible. View this demo of the different time formats and see how you can create a month and year picker for a credit card expiration field.

Formatting is inherited form the localization settings, but it can be overridden on a case-by-case basis.

Steps for time selection

Reduce the number of choices available on the scroller by setting the steps. Need a time picker with 5, 10 or 30 minute increments? The steps API setting has you covered.

Responsive display modes

Render the controls in the correct display mode according to the size of the screen. The Date & Time supports the following display modes:

  • top & bottom display (great for small screens)

  • center & bubble (great for larger screens)

  • inline (great for embedding the control inside forms and custom layout)

Circular scrolling

Circular and infinite scrolling is supported. Values like days in the month or months can be looping so that users don’t have to scroll all the way up to get to the first couple of values. You can manually override it with the circular API setting.

Themes & theme builder

The Date & Time is cross-browser and cross-platform and it ships with a number of themes:

  • iOS

  • Android Material and Android Holo

  • Windows Phone

  • Mobiscroll

Theme colors can be further customized with the theme builder to get the perfect fit with your brand and app/website. See how you to use the theme builder to make your custom themes.

What's next?

Did this answer your question?