ввод даты, календарь javascript
Ничего сам не дописывал, ничего не изменял, просто нашел старую (как оказалось позже) версию дейтпикер’а.
DatePicker - это скрипт, позволяющий пользователю выбрать дату на календаре и автоматически вставляющий ее (в нужном формате) в поле ввода.
Он полезен пользователям — не надо думать как правильно указать дату, чтобы было понятно и не надо открывать календарик и просчитывать какое же число будет через два с половиной дня.
Он полезен разработчикам — вероятность того, что дата будет указана корректно возрастает. Правда, если не сделать это поле ввода «только для чтения», то ошибки в заполнении все равно будут — проверено. 
Для установки такого календаря, вам нужно:
- Скачать скрипт
- Подключить файл с javascript’ом:Между тегами и вставьте код
<script src="datepicker.js" type="text/javascript" charset="UTF-8" language="javascript"></script> <link rel="stylesheet" type="text/css" href="datepicker.css" />
- В форме вставьте код для отображения поля ввода:
<form> <input name="dataa"> <input type="button" style="background: url('datepicker.jpg') no-repeat; width: 30px; border: 0px;" onclick="displayDatePicker('data', false, 'dmy', '.');"> </form>
Посмотеть как выглядит можно здесь.
Скачать можно !
Кстати, как оказалось, это устаревшая версия данного скрипта, но она меня вполне устроила.
Скачать новую версию можно . Установка и настройка не сильно отличаются
Похожие записи:
26 Коммент.
Оставить комментарий
Довольно интересно спасибо автору
По-моему, самый лучший DatePicker — в библиотеке UI jquery
я с jquery еще не совсем подружился….
но собираюсь
Обязательно подружитесь
Это самый замечательный и легкий в изучении javascript framework!
Спасибо большое, мне понравилось!
Спасибо за наглядное объяснение! У меня возникла потребность вставки пустого значения в поле даты. Допустим, возле кнопок «закрыть» и «текущая дата» нужно вставить поле «очистить», соответственно при нажатии на нее очищалось поле ввода даты. Проблема в том, что js я практически не знаю, поэтому был бы безмерно благодарен тому, кто сможет мне помочь! Заранее спасибо
если вы ничего не выберете, то поле и так будет пустым, а чтобы установить нули, например, то нужно сделать следующее
<input name="dataa">
измените на <input name="dataa" id="id_data" />
<input type="button" value="Установиь нули" onclick="document.getElementById(‘id_data’).value=’0000-00-00′;" />
Уважаемый Артем! Если я ничего не выберу при условии,что поле пустое, то, вы правильно сказали, ничего и не вставиться. Но если я выбрал какую-то дату, а потом опять открыл календарь и, ничего не выбрав, закрыл его, то в поле останется введенная ранее дата. Вот об этом я говорю
в функции displayDatePicker добавьте проверку — если ничего не выбрано, то вернуть 0000-00-00
Тот же ввод только с jquery описан здесь http://easyweb.org.ua/javascript/date-jquery/
Вопрос, а можно сделать календарь чтобы он сразу был выпавший и не прятался.
можно вместо
onclick="displayDatePicker('data', false, 'dmy', '.');"писать так в body
<body onload="displayDatePicker('data', false, 'dmy', '.');" >ну или воспользоваться вариатом с jquery http://easyweb.org.ua/javascript/date-jquery/
@Настя
Можете попробовать мой плагин calendarLite
Спасибо
Добрый день! Скрипт очень пригодился на мобильной версии сайта, так как библиотека jquery слишком тяжелая для неё.
Один вопрос: как сделать, чтобы в календаре неделя начиналась с понедельника, а не с воскресенья? Это оказалось очень важной проблемой.
хоть прошло много времени, но может кому-то пригодится.
Чтоб превратить календарь в наш обычный вид в скрипте нужно сделать:
1. В 4й строке перетащить ‘Вс’ в конец массива
2. В 144й — for (i = 0; i < thisDay.getDay(); i++) исправить на for (i = 0; i < thisDay.getDay()-1; i++)
3. В 158й — if (thisDay.getDay() == 6) исправить на if (thisDay.getDay() == 0)
если 1 число меясяца выпадает на понедельник, то скрипт переносит строку и получается что 1 число понедельник, и второе число понедельник)
это решение уже давно устарело.
рекомендую переходить на jquery
Да, верно.. только не тогда, когда 1е число понедельник, а когда воскресение. Ну значит надо поставить вместо 144 строки такой костылёк:
if(thisDay.getDay()==0) spaces = 6; else spaces = thisDay.getDay()-1;
for (i = 0; i < spaces; i++)
теперь вроде всё хорошо
_http://jscontrols.ru/?datepicker
и?
Подскажи, пожалуйста, как сделать, что бы календарь отображался на русском языке без использования документа .htaccess
файл .htaccess здесь абсолютно не при чем
просто в файле http://easyweb.org.ua/ex/inc/datepicker.js
впишите везде русский перевод
а вообще очень рекомендую переходить на http://easyweb.org.ua/javascript/date-jquery/
Я скачивал новую версию с двумя датами, там уже этот документ на русском языке, но проблема в том, когда я его переношу в php, то он вместо русских букв выдает каракули(кроме оперы), а если я использую документ .htaccess, то он выдает каракули на всем остальном моем сайте.
измените кодировку файла, в котором хранятся русские слова на ту, которая используется на всем вашем сайте
Смотрите видеоурок