MOBILE DATE & TIME PICKER CONTROLDon't let users struggle picking dates and times

Give people the UX they expect and
make your product shine

We'll help you get started in no time! - Start your RISK-FREE 15 Day Trial

Mobiscroll Date & Time is the mobile picker control
which perfectly fits into your workflow

Works across the web and hybrid apps.

Use it with plain Javascript or your favorite framework: jQuery, Angular, React, Knockout and ASP.NET MVC.

ImproveProvide focused input for your users

Let people pick a date, a time or both from the same screen. Don’t make them jump hurdles to fill out forms.

Date picker
Time picker
Date and time picker
Date picker
Time picker
Date and time picker
Date picker
Time picker
Date and time picker

SimplifyMake data entry as easy as saying it out loud

A great user experience should not be limited to native apps. Make it simple for users to enter data. Simple is what they expect.

Great look & feel

Familiar setting

It is the same looks & fluidity as in native,
but fully tailored to the context.

Learn & ExtendQuickly get started and customize as you go

Kickstart development with downloadable demos and starter projects. Explore the API documentation to further customize the the experience. Get premium support from the people who've actually built it.

mobiscroll.date('#birthday', {
    theme: 'material',
    display: 'center'
});
$('#birthday').mobiscroll().date({
    theme: 'material',
    display: 'center'
});
<input 
    type="text"
    ng-model="birthday"
    mobiscroll-date="{
        theme: 'material', 
        display: 'center' 
    }"
/>
<mobiscroll.Date
    theme="material"
    display="center"
    value="this.state.birthday"
    onSet={function(event, inst) {
        this.setState({ birthday: inst.getVal() });
    }}
/>

It’s Javascript

Build on top of the core product and fine tune to fit your exact needs. Explore the API documentation to customize the experience.

LocalizeShow localized controls in the expected format and language

With localization settings you can control the date and time format, copy of buttons, months, weekdays… with support for right-to-left languages. Pick one of the languages that come out of the box or simply add your own translation.

"We are using the Mobiscroll Calendar in one of our products.
Although it didn't come with the functionality we were looking for out of the box,
the support team went above and beyond to help me with the problem.

I was absolutely amazed by it and got so much more than I was expecting."

Tom Maddocks, Web Developer, Blueleaf

Some of the smartest companies rely on mobiscroll for their UI

With well thought out components and a lot of edge cases handled make your app feel and be top notch.

Let people pick dates

Set boundaries

By setting minimum and maximum dates you can control how far the user can select dates in the past and future.

Filtering for something in the past 6 months, only let visitors enter who are 21 and above or let users plan one year ahead... you got it all.

View live example →
Cover a specific range

110 years from today

Set a minimum date

Up to 18 years ago

Set a maximum date

Disable dates

Disable invalid dates, ranges, recurring days and even re-enable inside a range by overriding it.

View live example →
Grayed out dates

Grayed out dates

Dates that cannot be selected show up as grayed out making the selection error proof.

Show only what’s needed

Turn off the day wheel and you’ve got yourself a credit card expiration picker.

View live example →
Month and year picker

Let people pick times

Make the selection quicker

Booking time slots? Use steps for reducing the number of choices and only show options for every 15 or 30 minutes. Focus on what works best for the user.

15 minutes steps

15 minute steps and two wheels for hours & minutes

Single wheel select

Single wheel select

Control the time format

The time format is automatically adjusted based on localization settings. You can override it with the format setting when required.

View live example →
AM/PM wheel

AM/PM wheel for 12 hour format

Inherit from localization or set explicitly

24 hour format

Let people pick a date and a time

Stack wheels

Show the date and the time as a single wheel each when the user needs to cover a relatively short time span.

View live example →
Single wheel dates

Date as one wheel

Make the date scrollable as a single wheel
and help users make edging selections quicker.

Provide quick access

Give the user full control over the selection and show everything on its own wheel.

Independent wheels

Date and time on independent wheels

Having all date-parts on separate wheels
provides a more granular experience.

Stay relevant to the context

For phones and for tablets

With different rendering modes, you can use it for small and larger screens as well. Top/bottom rendering works well on phones while center and bubble is great for tablets. You can even place it inside your own markup with inline display.



Phone view

Bottom display

Perfect for small screens, like smartphones.

Bubble display

Perfect for larger screens, like phablets and tablets.

Tablet view

Blending right in

Customize all themes without the need of extra CSS. With the interactive theme builder you’ll see every change in real time, hit save and have it ready for your next download.

Start with theme presets

Customize color parameters with your mouse
or enter a color code.

See changes happen

Every adjustment you make to the theme
will instantly show up with actual controls.

Use it everywhere

Build a great app, no matter what your tech stack looks like. Open doors between teams.

Mobiscroll runs everywhere where Javascript runs, cross-platform and cross-framework. Build for iOS, Android and Windows Phone using the technologies you know and love.

Try it free for 15 Days

We'll support you through the whole process of getting up & running

Join great companies who takes their UI seriously

Features

The tools you need to build delightful products

Date select

Set up a targeted picker for selecting dates, with localization min/max and invalids.

Time select

Let people select a time, with time format, steps and further custom options.

Date and time

Combine the date & time selection into one view.

Wheels

Show date and time on a single wheel each or break them out into multiple wheels.

Date format

Control how the date is formatted. Override localization settings if needed.

Min and max dates

Control the boundaries with min and max settings to limit the options.

Invalids

Disable dates one by one, in ranges or by days.

Circular scrolling

Improve the UX by enabling people to easily scroll to the beginning of the month, hour or minutes.

12/24 hour format

Control the time format. Override localization settings if needed.

Min and max hours

Let the user only pick from available ours by limiting the available options.

Invalid times

Reduce errors by making selections invalid.

Steps

Display times the users are interested in. Every 15 minutes, 30 minutes?

Localization

Support multi-lingual apps and serve UI with the correct culture settings.

RTL Support

Support right-to-left languages and rendering.

Cross platform

Deliver great cross-platform web and hybrid apps with adaptable themes.

Fluid UX

Provide a native-like experience with smooth animations and refined controls.

Theming

Customize the look and feel of the UI to match your brand and app.

Display modes

Show the controls in the appropriate way for the context. Top, bottom, center, inline and bubble modes available.

Event handlers

Tap into the lifecycle of the UI control by writing custom event handlers.

Responsive

Support phones and tablets with different rendering modes.

Accessibility

Support people with disabilities and right-to-left cultures with WAI-ARIA support, Section 508, and RTL rendering.

Easily add to existing projects or use it for brand new solutions

Available for plain Javascript, jQuery and jQuery Mobile, Angular, Ionic, React, Knockout, ASP.NET MVC and for anywhere where Javascript runs.

All this bundled with amazing support

Talk with our incredible support staff, who is actually the same team who builds these controls.

Simple Pricing

Project licensing for multiple developers

$195
Buy Now
Perpetual license issued per project and comes with one year of free updates and support.
Looking for multiple project licensing or other products?
Let people pick dates, times in the same control or separately
Show localized controls with the correct format and language
Support iOS, Android and Windows Phone
Support mobile web and hybrid apps
Build with plain Javascript, jQuery, jQuery Mobile, Angular, Ionic, React, Knockout or ASP.NET MVC
Customize themes without the need for extra CSS
Get professional support right from the team building Mobiscroll

Start Your Free Trial

We'll support you through the whole process of getting up & running

"We spend lots of time building web app forms to work with Mobiscroll, which is fantastic.

Your software makes ours perform great!"
Henson Yem, Senior Technology Consultant, Tang Computers
Close
View implementation