Наш чат в Telegram для обмена идеями, проектами, мыслями, людьми в сфере ИТ г.Ростова-на-Дону: @it_rostov

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 байт].


.