Use the range picker 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 it 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.

The range picker can be user on a Mobiscroll input or any other input part of an existing form.

There are three ways to use the range picker:

• Initialize it on a single input, either Mobiscroll or non-Mobisroll input.
• Use it with two separate inputs of any type, one for start and another for end
• Embed the picker without an input. This can be the page itself or a more complex popup

The picker supports multiple controls:

• Calendar view - can be used on its own or combined with a time scroller
• Date picker - can be used separately or together with a time picker as a scroller on mobile and as a dropdown on desktop
• Time picker - can be used separately or together with a date picker or calendar
• Datetime picker - can be used as a scroller on mobile and as a dropdown on desktop

Use the controls option (expecting an array) to configure the picker.

The range has five built-in display modes that can be controlled through the display option:

• top - modal that slides down from the top
• bottom - modal that slides up from the bottom
• center - modal that shows up in the middle with a pop animation
• anchored - modal that shows up anchored to an input or any dom element
• inline - embeddable picker that is rendered into the markup without its own modal

Use the touchUi option to switch between touch optimized mobile renderign and pointer optimized desktop renderign. It can be dynamically switched with the help of the responsive oprion.

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.

Set up the range picker for date pair selection. Regardless if you are interested in the start/end date or the actual range, you have several possibilities of rendering a date range picker. The controls option supports different values:

• calendar - will render a calendar view for date range selection
• date - will render a date scroller or dropdown for date range selection
• datetime - will render a compact date scroller or dropdown with time picker for date & time range selection (explore date & time ranges)
• time - will render a time picker for range selection (explore time ranges)

Set up the range picker for time pair selection. Regardless if you are interested in the start/end date or the actual range, you have several possibilities of rendering a time range picker. The controls option supports different values:

• time - will render a time picker or dropdown for range selection
• calendar - will render a calendar view for date range selection (explore date ranges)
• date - will render a date scroller or dropdown for date range selection (explore date ranges)
• datetime - will render a compact date scroller or dropdown with time picker for date & time range selection (explore date & time ranges)

Set up the range picker for date & time pair selection. Regardless if you are interested in the start/end date or the actual range, you have several possibilities of rendering a date and time range picker. The controls option supports different values:

• datetime - will render a compact date scroller or dropdown with time picker for date & time range selection
• calendar - will render a calendar view for date range selection (explore date ranges)
• date - will render a date scroller or dropdown for date range selection (explore date ranges)
• time - will render a time picker for range selection (explore time ranges)

The calendar view can be customized with a couple different parameters:

• Month or week calendar - switch betweek month and week through the calendarType option and set the number of months or weeks through the pages and weeks options
• Set a month change direction - specify 'hoizontal' or 'vertical' in the calendarScroll option
• Show week numbers - set the showWeekNumbers to true and show a week counter starting from the first week of every year
• Hide the outer days of a month - set the showOuterDays to false in case you don't want to see days from previous and next months

Whether you are using the calendar or scroller for range selection, the microcopy for rangeStartLabel and rangeEndLabel can be easily overriden. For flight booking "Outbound" and "Return" makes sense while for accomodation booking "Check in" and "Check out" might be more appropriate.

The range start/end labels can also be hidden in some cases if needed. Use the showRangeLabels option for that.

Furthermore, you have the option to toggle the range highlight with the rangeHighlight option, if needed.

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.

Dates can be disabled through the invalid option. Another tool for setting disabled values are valid overrides. This means that you can make certain values valid from the invalid set. Eg. Invalidate all Tuesdays, but make Aug. 04, 2020 valid.

Both the invalid and valid options support the following:

• Exact dates - Passing exact values like: '2020-05-20', '2020-05-20T12:30:00' will disable specific day and/or times
• Date ranges - Passing start and end value pairs will disable specific days and/or times that fall into that range
• Recurring dates - Passing recurrence rules as objects or in RRULE strring 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.

Use the range picker for a new event creation. Let people pick start and end dates when adding events.

Dynamically switch between date only and date-time entry based on an "all-day" switch by changing the controls to 'date' or 'datetime'.

Besides invalidating selection that is before and after a specific date, the minimum and miximum allowed length of a range selection can be enforced through the minRange and maxRange options.

This form of validation is easy to understand and reduces erronous entries.

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.

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 rule in the recurring property under the invalid, marked, colors or labels options.

Use the configurator to experiment, build strings and objects that you can grab and use.

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 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 default shape of day marks are dots. It you want to mark a day for something you can add one or more colored dots through the marked option. There are cases when you might want to change the shape of the marks or use different marks that carry specific meaning.

When you want to update the shape you can simply use CSS and override the styling: .mbsc-calendar-marks .mbsc-calendar-mark { // you custom override }.

If you need to show different shapes, you can pass a custom CSS class in the markCssClass property of the marked option. Use it to show triangles, squares and dots for different marks.

In situations when you need to style the days a little differently you'll get built-in tools for setting background color, highlight color, add day marks or lables.

But sometimes that is not enough. Luckily you can use the cellCssClass property of the colors option to pass a CSS class that will be added to the day cell and apply any custom styling you write in CSS. These days can be recurring days, ranges or individual days.

You can use the cellCssClass in combination with custom cell background to highlight a range of days and show the ends as check-in and check-out days.

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 inlcuded 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.

RTL support is built in and can be explicitly controlled thorugh the rtl option. If not set, it is inherited from the locale settings.