The date & time picker supports single, multiple & range selection with mobile & desktop optimized rendering and interaction model. Use it as a scroller and dropdown. Easily switch between scroller and calendar view or single and range selection.
The capabilities like built-in validation, minimum, maximum values, disabled dates are supported by both the scroller and calendar.
As part of Date, time & calendar it can be picked up with the Framework and Complete licenses or with the component license.
Date & Time - Mobile & Desktop usage
Use the date & time for both mobile and desktop or set it up responsively.
The main difference between the two rendering modes is how the picker is laid out. Set the touchUi option to false and the component shows up suitable for larger screens and pointer interaction while setting it to true renders it suitable for touch screens.
Use the date picker on an existing form field, custom input or use it on Mobiscroll form fields. You can also embed it directly into your page. When linked to an input, the component will be shown on focus or when someone clicks on the field. Alternatively, you can leave the input editable and show the component only on a button click.
Date & Time - Initializing the picker
The date picker component generates a Mobiscroll input that inherits the theme and overall styling rules. It can however be overridden by setting the relevant options for the component.
There are three ways to use the date picker:
- Use it on an existing input by using the
inputComponentprop. A great example is usage with anIonInput - Let the component generate the Mobiscroll input. Give it the extra styling and overrides through options
- Embed the picker without an input. This can be the page itself or a more complex popup
Date & Time - Responsive behavior
The date & time has a liquid layout, which means it nicely adapts to its surroundings. There are times however when you would like to set up the component responsively.
Use the responsive option to configure the picker and change the options based on the viewport width. There are five predefined breakpoints:
xsmall- min-width: 0pxsmall- min-width: 576pxmedium- min-width: 768pxlarge- min-width: 992pxxlarge- min-width: 1200px- use
customfor setting a custombreakpoint
It is a good idea to change the display or controls option to tailor the UX. This way you can have a bottom positioned calendar on mobile, a popover anchored to the input on tablet and desktop display on large screens.
Date & Time - Understanding display modes
The date picker has five built-in display modes that can be controlled through the display option:
top- modal that slides down from the topbottom- modal that slides up from the bottomcenter- modal that shows up in the middle with a pop animationanchored- modal that shows up anchored to an input or any dom elementinline- embeddable picker that is rendered into the markup without its own modal
Use the touchUi option to switch between touch optimized mobile rendering and pointer optimized desktop rendering. It can be dynamically switched with the help of the responsive option.
The defaults change on a theme to theme basis. The ios theme comes with bottom on mobile and anchored on desktop while the material and windows themes have center on mobile and anchored on desktop.
Date & Time - Date selection
The date picker ships with five built-in variations for rendering the UI. The controls option supports the following:
date- renders a date-only scroller or dropdown controltime- renders a time-only scroller or dropdown controltimegrid- renders a time grid for time selectiondatetime- renders a date & time scroller or dropdowncalendar- renders a calendar view for date picking
When passing controls: ['date'], the date picker will render a date-only picker - scroller for touchUi: true and a dropdown for touchUi: false.
You can further customize the dateFormat and dateWheels to fine-tune the UX... use it as a credit card expiration picker.
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 selection
The date picker ships with five built-in variations for rendering the UI. The controls option supports the following:
date- renders a date-only scroller or dropdown controltime- renders a time-only scroller or dropdown controltimegrid- renders a time grid for time selectiondatetime- renders a date & time scroller or dropdowncalendar- renders a calendar view for date picking
When passing controls: ['time'], it will render a time-only picker - scroller for touchUi: true and a dropdown for touchUi: false. For a time grid use controls: ['timegrid'] instead.
You can change the timeFormat or rely on the formats coming from the locale settings.
Date & Time - Date & time selection
The date picker ships with five built-in variations for rendering the UI. The controls option supports the following:
date- renders a date-only scroller or dropdown controltime- renders a time-only scroller or dropdown controltimegrid- renders a time grid for time selectiondatetime- renders a date & time scroller or dropdowncalendar- renders a calendar view for date picking
Use controls: ['datetime'] for rendering a date & time picker within the same control, tied to the same input, or use them separately for two inputs - controls: ['date'] and controls: ['time']. It will render a scrollers for touchUi: true and a dropdowns for touchUi: false.
Date & Time - Setting time select steps
Adjust the gaps between the time picker values as needed. Use these three options for setting the steps:
stepHour- adjusts the gaps between the values for the time wheelstepMinute- adjusts the gaps between the values for the minute wheelstepSecond- adjusts the gaps between the values for the second wheel
Date & Time - Single value selection
Single value selection is the default behavior of the date picker. You can explicitly enable it by setting the selectMultiple to false.
You can dynamically switch between single and multiple select or range select which helps with building a system for one-way and two-way bookings.
Date & Time - Start-end selection
To enable range selection set the select option to range.
The microcopy for rangeStartLabel and rangeEndLabel can be easily overridden. For flight booking "Outbound" and "Return" makes sense while for accommodation booking "Check in" and "Check out" might be more appropriate.
Besides invalidating selection that is before and after a specific date, the minimum and maximum allowed length of a range selection can be enforced through the minRange and maxRange options.
Dynamically switching between single, multiple or range select can be done with option changes.
Date & Time - Date types
The date & time picker works with different date types:
- JS date object - a common way of passing a date is through a Date object:
new Date(1995, 11, 17, 15, 24)(make sure to not simply pass a date string tonew Date()) - ISO date string - standardized way of passing dates:
'2008-09-15T15:53:00'(make sure to pass it as a string) - Moment.js object - a great solution that solves common date management difficulties:
moment([2018, 3, 27, 12, 15])(make sure to have moment.js loaded)
When passing dates to the component - eg. invalids, min/max - you can do it in either format and the picker will automatically know what to do with it. If you want to specify how the picker should return values, you can do it in the returnFormat option.
Date & Time - Formatting values
Use the dateFormat, timeFormat options to customize how the values show up in the inputs after selection. If the formats are not explicitly set, they are inherited from the localization settings.
Besides customizing the date and time formats you can reorder the picker wheels and change its formats with the dateWheels and timeWheels options.
Date & Time - Credit card expiration
Customize the wheels and format the date picker for month & year. Choose a month/year format for the credit card expiration date.
This and even more can be done with the dateWheels setting.
Date & Time - Setting values
Values can change in a couple of different ways: through defaults, interacting with the UI or programmatically.
The date and time picker defaults to now, which can be easily overridden with the
defaultSelection option.
The values are set by interacting with the component and making a selection or it can be done programmatically
by updating the bound value.
Use the buttons option
for showing/hiding set, cancel or add custom buttons.
Date & Time - Timezones
The date picker works with local times by default, but ships with support for changing the timezone. The conversions and correct output relies on either of the two external libraries: luxon or moment-timezone. For installing and using these libraries check out this guide.
There are two angles regarding timezones:
dataTimezone- the datepicker expects this format and returns this format. It is'local'by default if the date-times don't contain any timezone informationdisplayTimezone- the datepicker displays everything in this timezone. The date-times will be converted from thedataTimezoneand displayed accordingly. It is'local'by default
Invalid date-times will be interpreted in dataTimezone when they contain no timezone info and will be shown in displayTimezone on the wheels.
Date & Time - Min & max values
Configuring minimum and maximum selectable values is great for reducing mistakes. Help people by limiting the selections for the task at hand. Use the min and max options to restrict the selection.
Setting the values will disable dates/times earlier than min and dates/times that come after max.
By default these options are empty and the date picker supports infinite navigation, while the time picker has all 24 hours/60 minutes/... available for selection. Values can be passed as JS date objects, ISO date strings or Moment.js objects.
Date & Time - Disabled values
Enforcing validation is essential to a great UX. First make sure to have the min & max values right and then work your way through disabled values.
Depending on your situation, you have two options:
- Set invalid - set the invalids through the
invalidoption. - Set valid - set the valids through the
validoption.
invalid and valid options support the following:
- Exact dates - Passing exact values like:
'2020-05-20'will disable/enable the specific day - Date ranges - Passing
startandendvalue pairs will disable/enable specific days and/or times that fall into that range - Recurring dates - Passing recurrence rules as objects or in RRULE string format will be parsed. For more information on recurrence check out the rule generator
Exact dates and the start/end pairs can be passed as JS date objects, ISO date strings or Moment.js objects. Having invalids set up correctly not just enhances the UX, but improves performance.
Date & Time - Recurring values
Disable recurring days, set marked or colored days with the help of the recurring object. Learn how to configure daily, weekly, monthly and yearly recurring dates and pass a rule in the recurring property under the invalid option. Exceptions for specific and recurring days can be configured.
Use the configurator to experiment, build strings and objects that you can grab and use.
Date & Time - Theming capabilities
The look and feel of the date picker can be deeply customized. There are four levels of customization:
- Base themes: Choose between iOS, Material and Windows.
- 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 from the header.
Date & Time - Lifecycle events
The date picker 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.
Date & Time - Calendar systems
The date picker 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 included 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 - RTL mode
RTL support is built in and can be explicitly controlled through the rtl option. If not set, it is inherited from the locale settings.
Looking for something you didn't see or have a sales question?
Ask us about it, we're here to help.