Долгое время использовал в своих проектах, различные готовые JavaScript-календари для ввода дат, в частности Dynarch jsCalendar, и они полностью устраивали. Но в ходе разработки одного проекта, связанного с автострахованием, возникла необходимость довольно частого ввода дат из прошлого (дни рождения, дата выдачи паспорта и водительских прав, пенсионного и т.п.). Оказалось, что использовать календари в таких случаях не так уж и удобно, так как приходится отматывать несколько десятков лет назад и для этого приходится делать много действий мышкой.
Было решено поискать более удобный вариант «мышиного ввода» (ввод даты с клавиатуры никто не отменял). Перебрав больше десятка различных календарей, условно раздел их на 3 основных типа (в скобках указан один из представителей данного типа).
![](https://habrastorage.org/r/w1560/storage1/34634d10/fb3b91aa/11a0f59e/4371f9cb.png)
Есть еще варианты, в которых год вводится с клавиатуры, но тогда, по-моему, уже проще всю дату ввести с клавиатуры.
И тут вспомнился календарь из Windows Vista/7, готовых календарей в таком стиле оказалось всего пару штук. Но у обоих был недостаток, они не умели показывать десятилетия. Ради спортивного интереса решил сделать свой вариант «вистовского» календаря, который умел бы выводить десятилетия. Вот что из этого получилось.
![](https://habrastorage.org/r/w1560/storage1/cafe9a92/42cf2bf9/48b2ff8b/27eb7d0a.png)
Основной плюс такого подхода в том, что для ввода даты таким способом нужно всего 4 клика независимо от даты (в пределах последнего столетия). Так же побочными бонусами оказалась, возможность входа и выхода на любом этапе, т.е. можно сразу показывать текущий месяц (где нужны текущие даты), можно показать год и после выбора месяца выйти (для кредиток), а можно и вовсе только год (год выпуска авто).
В Windows Vista/7 календарь выглядит несколько иначе, десятилетия выводятся диапазонами, типа 1980-1989, сначала сделал также. Но после тестов решил отказаться от этой идеи. Так как из-за вдвое большого количества чисел на той же площади, становилось сложнее сделать выбор, плюс большинство людей, не из числа программистов, привыкли считать, начиная с единицы, и для них более привычны диапазоны, типа 1981-1990, из-за чего люди начинали немного тупить в какой именно диапазон входят нулевые года. В результате решил выводить года с буквой «x» в конце, так вроде получилось более удобно, мозг уже практически чисто визуально сравнивает три первых цифры на совпадение, а не размышляет о попадании числа в диапазон.
После реализации стало любопытно, какая будет разница в скорости ввода. Сделал тестовую страничку, которая измеряет время, затраченное на ввод дат с помощью разных календарей. Для сравнения выбраны Dynarch jsCalendar в двух вариантах (года с шагом 1 и 2), jQuery UI Datepicker и мой вариант календаря в стиле Vista получивший название zDater.
Эксперименты проводились на друзьях, а также родителях (в качестве пользователей которые не очень дружат с компами).
Прогнозируемо самым медленным вариантом оказался Dynarch jsCalendar, на ввод даты уходит 11-15 секунд, на втором месте расположился jQuery UI Datepicker — время сократилось до 6-10 сек. Естественно, чем более древняя дата, тем больше времени уходит на ввод.
Ну и на первом месте с заметным преимуществом (особенно при повторном использовании, когда уже знаешь принцип работы) zDater – 4-5 секунды, а после небольших тренировок можно и в 2 секунды укладываться. У родителей конечно результаты похуже, zDater стал еще больше выигрывать у конкурентов, возможно за счет того что нет больших списков годов, в которых неподготовленным юзерам сложнее ориентироваться.
Страница с тестом, на которой вы можете протестировать самостоятельно разные варианты.
![](https://habrastorage.org/r/w1560/storage1/c6b68ee2/2dd0f324/5117a68d/9fdf17d8.png)
Вот пример для человека, который неплохо дружит с компом, после второго прохода (первый для ознакомления).
UPD. Поправил тестовую страницу добавил для jQuery UI русский и неделю с понедельника, сделал случайный вывод дат для теста, в zDater сдвинул под поле ввода.
Также добавлены примеры ввода разных типов дат для наглядности (например, текущая дата, месяц и год, только год).
Было решено поискать более удобный вариант «мышиного ввода» (ввод даты с клавиатуры никто не отменял). Перебрав больше десятка различных календарей, условно раздел их на 3 основных типа (в скобках указан один из представителей данного типа).
![](https://habrastorage.org/storage1/34634d10/fb3b91aa/11a0f59e/4371f9cb.png)
- Выбор года и месяца осуществляется стрелками (datePicker от frequency-decoder).
- Выбор года и месяца стрелками и из выпадающего списка (Dynarch jsCalendar).
- Выбор года и месяца из стандартных селектов (jQuery UI Datepicker).
Есть еще варианты, в которых год вводится с клавиатуры, но тогда, по-моему, уже проще всю дату ввести с клавиатуры.
Календарь в стиле Windows Vista/7
И тут вспомнился календарь из Windows Vista/7, готовых календарей в таком стиле оказалось всего пару штук. Но у обоих был недостаток, они не умели показывать десятилетия. Ради спортивного интереса решил сделать свой вариант «вистовского» календаря, который умел бы выводить десятилетия. Вот что из этого получилось.
![](https://habrastorage.org/storage1/cafe9a92/42cf2bf9/48b2ff8b/27eb7d0a.png)
Основной плюс такого подхода в том, что для ввода даты таким способом нужно всего 4 клика независимо от даты (в пределах последнего столетия). Так же побочными бонусами оказалась, возможность входа и выхода на любом этапе, т.е. можно сразу показывать текущий месяц (где нужны текущие даты), можно показать год и после выбора месяца выйти (для кредиток), а можно и вовсе только год (год выпуска авто).
В Windows Vista/7 календарь выглядит несколько иначе, десятилетия выводятся диапазонами, типа 1980-1989, сначала сделал также. Но после тестов решил отказаться от этой идеи. Так как из-за вдвое большого количества чисел на той же площади, становилось сложнее сделать выбор, плюс большинство людей, не из числа программистов, привыкли считать, начиная с единицы, и для них более привычны диапазоны, типа 1981-1990, из-за чего люди начинали немного тупить в какой именно диапазон входят нулевые года. В результате решил выводить года с буквой «x» в конце, так вроде получилось более удобно, мозг уже практически чисто визуально сравнивает три первых цифры на совпадение, а не размышляет о попадании числа в диапазон.
Сравнение юзабилити календарей
После реализации стало любопытно, какая будет разница в скорости ввода. Сделал тестовую страничку, которая измеряет время, затраченное на ввод дат с помощью разных календарей. Для сравнения выбраны Dynarch jsCalendar в двух вариантах (года с шагом 1 и 2), jQuery UI Datepicker и мой вариант календаря в стиле Vista получивший название zDater.
Эксперименты проводились на друзьях, а также родителях (в качестве пользователей которые не очень дружат с компами).
Прогнозируемо самым медленным вариантом оказался Dynarch jsCalendar, на ввод даты уходит 11-15 секунд, на втором месте расположился jQuery UI Datepicker — время сократилось до 6-10 сек. Естественно, чем более древняя дата, тем больше времени уходит на ввод.
Ну и на первом месте с заметным преимуществом (особенно при повторном использовании, когда уже знаешь принцип работы) zDater – 4-5 секунды, а после небольших тренировок можно и в 2 секунды укладываться. У родителей конечно результаты похуже, zDater стал еще больше выигрывать у конкурентов, возможно за счет того что нет больших списков годов, в которых неподготовленным юзерам сложнее ориентироваться.
Страница с тестом, на которой вы можете протестировать самостоятельно разные варианты.
![](https://habrastorage.org/storage1/c6b68ee2/2dd0f324/5117a68d/9fdf17d8.png)
Вот пример для человека, который неплохо дружит с компом, после второго прохода (первый для ознакомления).
UPD. Поправил тестовую страницу добавил для jQuery UI русский и неделю с понедельника, сделал случайный вывод дат для теста, в zDater сдвинул под поле ввода.
Также добавлены примеры ввода разных типов дат для наглядности (например, текущая дата, месяц и год, только год).