Mobiscroll 5 beta 4 is out and it comes with a new date and time range picker. Previously we introduced the date picker that includes both the scrollers and calendar. After single, multiple value selection we are adding range selection for date and time.

Part of a bigger picture

We decided to keep it under the date picker for a couple of reasons. First, because the different select modes have a lot of commonalities. Second, we would like to make switching from range selection to a single date selection natively supported. One of the most common use-cases of the range picker is booking flights and in v5 switching between one-way and returning flights is as easy as changing an option runtime.

Customizing the experience

One of the great new features of the range is the hover effects and range highlight control. This is a great improvement in terms of UX. Actually seeing the highlighted range before clicking on the selection will make this a more fluid experience.

Furthermore, you have control over the start/end labels. You can hide them or simply rename it to something meaningful.

See for yourself and give it a try with the live demos.

Date, time or both

Handled under the same component, use the controls option to set wether it is date, time or date & time range selection. There are two options for date selection: calendar or scroller while the time picker is always a scroller or dropdown depending if it’s used with touch or pointer interaction.

Months or weeks

And of course, the range select works with a single or multi month calendar. This can be one, two, three months or whatever makes sense.

Week views support range selection.

Play around with the configuration options on the demo page.

Next steps

We are planning to add more examples to the range and date pickers as well as a number of new features will help tho shape great booking experiences.

As we are nearing the last quarter of 2020, we’ve set out to add some more refinements to the event calendar along with drag & drop and prepare for the first stable release of Mobiscroll 5.