Войти через VK Войти через FB Войти через Google Войти через Яндекс
Поиск по сайту
JavaScript календарь с выбором даты на HTML+Javascript
Скрипт календаря имеет следующие отличия:
- календарь выполнен в виде объекта _Calendar и не будет пересекаться с другими скриптами по именам переменных;
- Не используются никакие фреймворки. Только чистый javascript;
- возможность задавать даты без ограничений;
- выделение цветом сегодняшнего дня (используется время пользователя);
- добавлена кнопка выбора текущей даты;
- изменен формат получаемой даты, теперь используются ведущие нули;
- никаких графических элементов;
- русская кодировка cp1251 или utf-8 на выбор;
- неделя начинается с понедельника
- возможно задать стартовый и конечный годы
Подключается скрипт очень просто. При этом календарь может подключатся к любому количеству полей ввода. В файле примера видно, как использовать скрипт.
Удобный выбор месяца и года с помощью выпадающих select-ов. В отличии от аналогов, в которых чтобы выбрать дату рождения приходится "промотать" все месяца каждого года. От использования отдельных стрелок для годов тоже было решено отказаться, т.к. нажимать много раз тоже затруднительно, при этом простота и очевидность пострадают.
Кликните на поле ввода даты для вызова календаря:
Исходный код этого примера:
<script src="/calendar_kdg_utf8.min.js" type="text/javascript"></script>
<form action="">
с <input type="text" value="dd-mm-yy" onfocus="this.select();_Calendar.lcs(this)"
onclick="event.cancelBubble=true;this.select();_Calendar.lcs(this)" data-yearfrom="-80" data-yearto="5">
по <input type="text" value="dd-mm-yy" onfocus="this.select();_Calendar.lcs(this)"
onclick="event.cancelBubble=true;this.select();_Calendar.lcs(this)" data-yearto="5">
</form>
Содержимое файла calendar_kdg.js
Используемые календарем стили можете подредактировать под себя:
<style>
/*_Calendar*/
#Calendar {
position: absolute;
border-collapse: collapse;
background: #FFFFFF;
border: 1px solid #303030;
display: none;
user-select: none;
z-index: 9999999;
box-shadow: 0 0 15px rgba(98, 98, 206, 1);
}
#Calendar_mns{
text-align:center;
margin: 0;
padding: 0;
}
#Calendar select,#Calendar option {
font-size: 11px;
padding: 0 2px
}
</style>
Скачать js-файл календаря в кодировке windows-1251 [8865 байт].
Скачать js-файл календаря в кодировке utf-8 [9228 байт],
он же сжатый [6955 байт].
.
Прокомментировать/Отблагодарить