AAA Главная
Примеры PHP Примеры JavaScript Примеры Ajax Примеры CSS,HTML

JavaScript календарь с выбором даты на HTML+Javascript

Подключается скрипт очень просто. При этом календарь может подключатся к любому количеству полей ввода. В файле примера видно, как использовать скрипт.

Удобный выбор месяца и года с помощью выпадающих select-ов. В отличии от аналогов, в которых чтобы выбрать дату рождения приходится "промотать" все месяца каждого года. От использования отдельных стрелок для годов тоже было решено отказаться, т.к. нажимать много раз тоже затруднительно, при этом простота и очевидность пострадают.


Кликните на поле ввода даты для вызова календаря:

с по



Исходный код этого примера:

<script src="/calendar_kdg.js" type="text/javascript"></script>
<form action="">
<h3>Кликните на поле ввода даты для вызова календаря:</h3>
с <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">
</p>
</form>


Содержимое файла calendar_kdg.js


Используемые календарем стили, можете подредактировать под себя:
<style>
/*_Calendar*/
#Calendar {
    position: absolute;
    border-collapse: collapse;
    background: #FFFFFF;
    border: 1px solid #303030;
    display: none;
    -moz-user-select: none;
    -khtml-user-select: 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 [8871 байт].
Скачать js-файл календаря в кодировке utf-8 [9932 байт], он же сжатый [5843 байт].

.

© Copyright 2008- by KDG



Rambler's Top100