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.

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.

Use the component for date selection and only show the day, month and year wheels. Use the dateFormat and dateWheels 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.

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.

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.

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.

Customize the look and feel with themes or custom CSS. There are four levels of customization:

• Base themes: Choose between Mobiscroll, iOS, Android Material and Windows.
• Light or dark: Every theme has a light and dark variant. Setting the themeVariant to '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 from the header.

The date picker 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 included within the Farsi language pack
• Hijri - it is included in the Arabic language pack

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.