Можно вводить дату в форму вручную, а можно, написав несколько строчек, сделать так, чтобы при нажатии на поле ввода появлялся календарик, из которого можно удобно выбрать дату. Для этого используется виджет Datepicker из библиотеки jQuery
Если у нас есть форма
Чтобы при получении фокуса ввода этим полем открывался "календарик" нужно добавить несколько строк в заголовок страницы и написать небольшой скриптик.
Добавляем в заголовок:
Здесь первая строка - ссылка на jQuery. Вторая строка - ссылка на наш локальный скрипт (о нем ниже). Третья строка - ссылка на библиотеку, в которой собраны все дизайнерские плюшки. Наш календарик, кстати, тоже является виджетом из этой библиотеки. Подробнее можно почитать здесь. Последняя строка - ссылка на css файл со стилями для календарика.
Все подготовки сделаны, осталось только привязать виджет datepicker к нашему элементу input. Для этого в вышеупомянутом скрипте datePicker.js напишем такие строки:
Можно было бы написать короче:
Но тогда календарик выглядел бы немного иначе. Мы же немного его настроили:
Кроме всего этого можно задать еще кучу параметров, о чем рекомендую почитать здесь.
Если у нас есть форма
<form ...> ... <input type="text" id="dateOfBirth"/> ... </form>
Чтобы при получении фокуса ввода этим полем открывался "календарик" нужно добавить несколько строк в заголовок страницы и написать небольшой скриптик.
Добавляем в заголовок:
<head> ... <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="scripts/datePicker.js" type="text/javascript"></script> <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script> <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" /> </head>
Здесь первая строка - ссылка на jQuery. Вторая строка - ссылка на наш локальный скрипт (о нем ниже). Третья строка - ссылка на библиотеку, в которой собраны все дизайнерские плюшки. Наш календарик, кстати, тоже является виджетом из этой библиотеки. Подробнее можно почитать здесь. Последняя строка - ссылка на css файл со стилями для календарика.
Все подготовки сделаны, осталось только привязать виджет datepicker к нашему элементу input. Для этого в вышеупомянутом скрипте datePicker.js напишем такие строки:
$(function(){
$("#dateOfBirth" ).datepicker({
dateFormat: 'dd.mm.yy',
changeMonth: true,
changeYear: true,
yearRange: "c-100:c",
firstDay: '1'
});
});
Можно было бы написать короче:
$(function(){
$("#dateOfBirth" ).datepicker();
});
Но тогда календарик выглядел бы немного иначе. Мы же немного его настроили:
- указали формат даты дд.мм.гггг (yy - это гггг, а y - гг)
- позволили пользователю удобно выбирать месяц (из выпадающего списка)
- позволили выбирать год
- указали минимальную и максимальную возможные к выбору даты
- установили первым днем недели понедельник (по умолчанию первый день это 0 - воскресенье)
Кроме всего этого можно задать еще кучу параметров, о чем рекомендую почитать здесь.
Комментариев нет:
Отправить комментарий