Легкий, быстрый, русскоязычный календарь дат, который появляется при клике по полю формы заполнения.
Если Вам нужен легкий календарь, появляющийся при клике по полю формы заполнения, это то, что Вам нужно.
Вначале пример, чтобы понимать, о чем идет речь, кликните на любое поле с датой:
Данный плагин по сути является русифицированным jQuery UI Datepicker 1.7.2 с исключенными изображениями, упрощенным CSS и быстрым появлением.
Чтобы использовать плагин, нужно:
1. Подключить javascript:
<script language="Javascript" type="text/javascript" src="jquery.js"></script>
<link type="text/css" href="/calendar/latest.css" rel="Stylesheet" />
<script type="text/javascript" src="/calendar/ui.datepicker.js"></script>
<script>
$(".datepickerTimeField").datepicker({
changeMonth: true,
changeYear: true,
dateFormat: 'dd.mm.yy',
firstDay: 1, changeFirstDay: false,
navigationAsDateFormat: false,
duration: 0,// отключаем эффект появления
});
</script>
2. К нужным полям INPUT добавить class="datepickerTimeField", к примеру так:
<input name="min" value="04.05.2010" class="datepickerTimeField">
При желании Вы можете скачать пример или посмотреть его в новом окне »
А как же часы, минуты и секунды?
Когда просто даты мало, в интернете можно найти футуристические календари с часами и минутами »
А мы для Вас разработали свою альтернативу, на базе jQuery UI Datepicker 1.8.2
Чтобы использовать плагин, нужно:
1. Подключить javascript:
<script language="Javascript" type="text/javascript" src="jquery.js"></script>
<link type="text/css" href="/calendar/latest.css" rel="Stylesheet" />
<script type="text/javascript" src="/calendar/latest.js"></script>
2. К нужным полям INPUT добавить class="datepickerTimeField", к примеру так:
<input name="min" value="19.05.2010 05:07:25" class="datepickerTimeField">
При желании Вы можете скачать пример или посмотреть его в новом окне »
Подсказки:
1. Если Вы на своем сайте не используете DOCTYPE, то стили ширины немного поплывут, а чтобы их поправить, Вам нужно добавить такие CSS правила:
.ui-datepicker th, .ui-datepicker .ui-datepicker-header { font:12px Arial,Helvetica,Tahoma,sans-serif; }
.ui-datepicker { width: 205px }
2. Наверняка Вы заметили, что в календаре очень мал интервал выбора лет. Так вот, чтобы выставить там свой интервал, при подключении пропишите следующее правило:
yearRange: "1900:2010"
3. Бывает нужно, чтобы по-умолчанию календарь показывал таблицу выбора Х лет назад. Например, чтобы сделать, 35 лет назад, при подключении пропишите следующее правило (12775 - количество дней тому назад):
defaultDate: -12775
Удачных разработок!
