Benchmarking JavaScript Calendars
For a long time I used various ready-made JavaScript calendars for entering dates in my projects, in particular, Dynarch jsCalendar, and they were completely fine. But during the development of one project related to car insurance, it became necessary to enter dates from the past quite often (birthdays, date of issue of the passport and driver’s license, pension, etc.). It turned out that using calendars in such cases is not so convenient, since you have to unwind several decades ago and for this you have to do a lot of actions with the mouse.
It was decided to look for a more convenient option of “mouse input” (no one canceled the date from the keyboard). After going over more than a dozen different calendars, they are conditionally divided into 3 main types (one of the representatives of this type is indicated in brackets).
There are still options in which the year is entered using the keyboard, but then, in my opinion, it is already easier to enter the entire date using the keyboard.
And then I remembered a calendar from Windows Vista / 7, there were only a couple of ready-made calendars in this style. But both had a drawback, they did not know how to show decades. For the sake of sports interest, I decided to make my own version of the “whist” calendar, which would be able to display decades. That's what came out of it.
The main advantage of this approach is that to enter a date in this way you need only 4 clicks, regardless of the date (within the last century). Also, side bonuses turned out to be the ability to enter and exit at any stage, i.e. you can immediately show the current month (where the current dates are needed), you can show the year and, after choosing a month, exit (for credit cards), or you can just have a year (year of car manufacture).
In Windows Vista / 7, the calendar looks a little different, decades are displayed in ranges, such as 1980-1989, first made as well. But after the tests I decided to abandon this idea. Since it’s become more difficult to make a choice because of the double number of numbers in the same area, plus most people, not programmers, are used to counting starting from one, and ranges are more common for them, such as 1981-1990, because what people started to get a little dull in what exactly range includes zero years. As a result, I decided to display the year with the letter “x” at the end, so it seemed to be more convenient, the brain is already almost purely visually comparing the first three digits for coincidence, rather than thinking about getting a number in the range.
After the implementation, I became curious about the difference in input speed. Made a test page that measures the time taken to enter dates using different calendars. For comparison, I chose Dynarch jsCalendar in two versions (years with steps 1 and 2), jQuery UI Datepicker and my version of the Vista-style calendar called zDater.
The experiments were conducted on friends as well as parents (as users who are not very friendly with computers).
The predicted slowest option was Dynarch jsCalendar, it takes 11-15 seconds to enter the date, jQuery UI Datepicker is in second place - the time was reduced to 6-10 seconds. Naturally, the older the date, the more time it takes to enter.
Well, in the first place with a noticeable advantage (especially when reused, when you already know the principle of operation) zDater - 4-5 seconds, and after short workouts you can fit in 2 seconds. Parents, of course, have worse results, zDater began to beat competitors even more, possibly due to the fact that there are no large lists of years in which unprepared users are more difficult to navigate.
Test page where you can test different options yourself.
Here is an example for a person who is good friends with the computer, after the second pass (the first for review).
UPD Corrected the test page, added Russian and a week since Monday for jQuery UI, made a random output of dates for the test, moved it to zDater under the input field.
Also added examples of entering different types of dates for clarity (for example, current date, month and year, only year).
It was decided to look for a more convenient option of “mouse input” (no one canceled the date from the keyboard). After going over more than a dozen different calendars, they are conditionally divided into 3 main types (one of the representatives of this type is indicated in brackets).
- The year and month are selected by arrows (datePicker from frequency-decoder).
- Choice of year and month by arrows and from the drop-down list (Dynarch jsCalendar).
- Choice of year and month from standard selects (jQuery UI Datepicker).
There are still options in which the year is entered using the keyboard, but then, in my opinion, it is already easier to enter the entire date using the keyboard.
Windows Vista / 7 style calendar
And then I remembered a calendar from Windows Vista / 7, there were only a couple of ready-made calendars in this style. But both had a drawback, they did not know how to show decades. For the sake of sports interest, I decided to make my own version of the “whist” calendar, which would be able to display decades. That's what came out of it.
The main advantage of this approach is that to enter a date in this way you need only 4 clicks, regardless of the date (within the last century). Also, side bonuses turned out to be the ability to enter and exit at any stage, i.e. you can immediately show the current month (where the current dates are needed), you can show the year and, after choosing a month, exit (for credit cards), or you can just have a year (year of car manufacture).
In Windows Vista / 7, the calendar looks a little different, decades are displayed in ranges, such as 1980-1989, first made as well. But after the tests I decided to abandon this idea. Since it’s become more difficult to make a choice because of the double number of numbers in the same area, plus most people, not programmers, are used to counting starting from one, and ranges are more common for them, such as 1981-1990, because what people started to get a little dull in what exactly range includes zero years. As a result, I decided to display the year with the letter “x” at the end, so it seemed to be more convenient, the brain is already almost purely visually comparing the first three digits for coincidence, rather than thinking about getting a number in the range.
Usability Calendar Comparison
After the implementation, I became curious about the difference in input speed. Made a test page that measures the time taken to enter dates using different calendars. For comparison, I chose Dynarch jsCalendar in two versions (years with steps 1 and 2), jQuery UI Datepicker and my version of the Vista-style calendar called zDater.
The experiments were conducted on friends as well as parents (as users who are not very friendly with computers).
The predicted slowest option was Dynarch jsCalendar, it takes 11-15 seconds to enter the date, jQuery UI Datepicker is in second place - the time was reduced to 6-10 seconds. Naturally, the older the date, the more time it takes to enter.
Well, in the first place with a noticeable advantage (especially when reused, when you already know the principle of operation) zDater - 4-5 seconds, and after short workouts you can fit in 2 seconds. Parents, of course, have worse results, zDater began to beat competitors even more, possibly due to the fact that there are no large lists of years in which unprepared users are more difficult to navigate.
Test page where you can test different options yourself.
Here is an example for a person who is good friends with the computer, after the second pass (the first for review).
UPD Corrected the test page, added Russian and a week since Monday for jQuery UI, made a random output of dates for the test, moved it to zDater under the input field.
Also added examples of entering different types of dates for clarity (for example, current date, month and year, only year).