Happy to announce the third beta for Mobiscroll 5! We are shipping a new date picker which is a consolidation of the scroller, dropdown and calendar components.

Calendar and scrollers together

Instead of having separate components with different approaches to picking dates and times we are introducing the new date picker that includes the calendar view and scroller functionality as well.

We decided to combine everything into a single component and let developers control what people see through the controls option. This makes dynamically switching based on the device or context just as simple as a function call or a value change. You won’t need to dynamically show/hide containers with the different pickers and handle multiple instances.

This makes the code-base a bit simpler, since a lot of the date handling and validation logic is shared between the different controls.

Go ahead and take a look at the new calendar with date & time.

Range selection

While Beta 3 doesn’t have range selection yet, it will be included within the date picker. Having single, multiple and range selection available in the same component helps in creating a fluid UX when multiple selection modes are needed. A great example is flight booking where having an outbound date only is just as valid as having two dates for outbound and returning flights.

Better control over dynamic option changes

The new date picker comes with the same capabilities as the event calendar in terms of dynamic options. You won’t have full redraws, just quick updates to the relevant pieces of the UI that are directly influenced by the options that were changed. And with new features like custom headers, you can add a control for example that switches between a week view and month view.

New styling for iOS 14

As the next iteration of iOS is nearing its final release we looked at how the native components changed. These are not drastic changes, just slight updates, making the UI more modern.

The date picker comes with the updated look for iOS 14.

Updates to the popup and event calendar improvements

A couple of bugs were fixed for the event calendar. For a full list make sure to check out the changelog.

The popup on the other hand received support for left and right anchoring, which is super useful for longer content and modals that have a bigger height. This is particularly great when rendering an edit from right beside an event within a scheduler.

New demo page

While working on the new demos for the date picker and event calendar components, we updated the demo page. A couple of differences:

• We introduced a new way to navigate and organised them into topics.
• The v5 demos are written from the ground up and are introducing concepts step by step.
• You will see demos that don’t provide the full source, only teach the relevant options and how to use them.

Check it out and let us know what you think.

What’s next?

We are speeding toward the final version of the Event calendar and hope to release the first stable version soon. We are already preparing Beta 4 and are planning to release it in the next couple of weeks.

Happy to share that there will be two highlights: range selection for date & time and drag & drop for the event calendar.