Managing Date and Time with Webix

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:

rows:[
    { view:"calendar",  type: "time"  },
    { view:"datepicker",  type: "time"  },
]

As easy as that.

View code >>

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)
}

View code >>

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.

Try to select time:

View code >>

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

View code >>

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.

You can try it yourself:

View code >>

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)

View code >>

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 🙂