Date and time selection is a frequent task in modern web-development. It is important to do it in a simple and intuitively clear way to ensure successful communication between your application and users.
So let’s explore what Webix can offer for retrieving date and time from users.
Simple date and time selection via Calendar
Webix Calendar is shipped with all the basic functionality and comes useful if you need an unsophisticated date/time selection (e.g. when filling a form). You can use Webix Calendar for setting dates into input fields with the help of Webix Datepicker
What’s more, you can switch Calendar or Datepicker to the “time-only” mode to select only time with just one line of code:
{ view:"calendar", type: "time" },
{ view:"datepicker", type: "time" },
]
As easy as that.
If you need date and time ranges, please consider the DateRange and DateRangePicker widgets.
Benefits of this approach
As users are limited in their choice by the UI there is no place for picking invalid dates or time. Even if you make inputs editable, Calendar will try to parse its text.
What’s more you can disable picking particular dates or time with the blockDates and blockTime functions and filter the desired values using the Date module as in the example below:
view:"calendar",
// block all the past days,
blockDates: date => date < webix.Date.datePart(now),
// blocks time till 8:00
blockTime: time => webix.Date.timePart(time) < 28800
}
It is also possible to specify minimum and maximum date and time values. Anything beyond those values will be blocked:
view:"calendar",
minTime: “06:00”,
maxDate:new Date(2021, 6, 20)
}
Limitations of this approach
However, UI limitations here is a double-edged sword as they don’t allow selecting time with high precision. Users can only pick a time with a 5-minute precision or more.
Selecting time from predefined options
But what if users need to pick a time down to the minute? Let’s explore other Webix tools that are not meant to deal with time management yet will help to select exact values. Webix Combo (or its non-editable sibling, Webix RichSelect) allows setting predefined options so you can use them to specify the accurate time units.
Benefits of this approach
You can specify time accurate to the minute. It is also possible to define options with a 5-minute increment thus blocking the rest
Limitations of this approach
Sometimes the list of options can be a bit longish (e.g. in case of minutes) and users will have to scroll through all the options.
Manual time selection with Slider
Another way to ensure time precision is to use is Webix Slider. You can combine it with Webix text inputs to make time selection even more flexible.
Benefits of this approach
Time can be selected from both slider and input that make it easier for mobile users to pick a value. You can also tune time steps (e.g. to 5-minutes)
Limitations of this approach
Blocking specific values can be problematic.
What’s next
There are lots of tools for time and date management in Webix and each solution has its pros and cons. So you are to decide which of them is best for your application.
Please share your ideas about tools you want to see among the other controls for date and time management in Webix library. Or simply ask questions if any 🙂
