Регистрация Войти
Войти через VK Войти через FB Войти через Google Войти через Яндекс
Войти через VK Войти через FB Войти через Google Войти через Яндекс
Поиск по сайту
JavaScript календарь с выбором даты на HTML+Javascript
Скрипт календаря имеет следующие отличия:
- календарь выполнен в виде объекта _Calendar и не будет пересекаться с другими скриптами по именам переменных;
- Не используются никакие фреймворки. Только чистый javascript;
- возможность задавать даты без ограничений;
- выделение цветом сегодняшнего дня (используется время пользователя);
- добавлена кнопка выбора текущей даты;
- изменен формат получаемой даты, теперь используются ведущие нули;
- никаких графических элементов;
- русская кодировка cp1251 или utf-8 на выбор;
- неделя начинается с понедельника
- возможно задать стартовый и конечный годы
Подключается скрипт очень просто. При этом календарь может подключатся к любому количеству полей ввода. В файле примера видно, как использовать скрипт.
Удобный выбор месяца и года с помощью выпадающих select-ов. В отличии от аналогов, в которых чтобы выбрать дату рождения приходится "промотать" все месяца каждого года. От использования отдельных стрелок для годов тоже было решено отказаться, т.к. нажимать много раз тоже затруднительно, при этом простота и очевидность пострадают.
Кликните на поле ввода даты для вызова календаря:
Исходный код этого примера:
<script src="/calendar_kdg.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-файл календаря в кодировке utf-8 [9509 байт], он же сжатый [6955 байт].
.
Прокомментировать/Отблагодарить