Бортовой журнал Ктулху
    Вы здесь:
  • Главная
    • >
  • /dev
    • > Датапикер или календарь на JS для вставки даты в input

Датапикер или календарь на JS для вставки даты в input

При работе над личным кабинетом одного проекта возникла необходимость в календаре для формы регистрации, чтобы юзер не мучался с написанием вручную дат а просто ткнул мышкой куда нужно и забыл навеки.

Так как в JS я не особо разбираюсь, было принято решение искать готовые календари, которые, как я узнал, принято называть датапикерами (datapicker от слов data и pick - Google Translate в помощь если чё).

Я не буду делать здесь обзор всех существующих календарей, а напишу только о том, который сразу без бубна заработал.

Кому хочется обзор - нате раз и два и три.

Я остановился на вот этом календаре. У него есть одна особенность которая мне очень была необходима - указание диапазона годов что удобно для разных регистраций, например указание возраста 18+.

Интегрируется он следующим образом:

вставляется между <head>и</head>

<head>
...
<script src="/<a href="http://code.jquery.com/jquery-1.9.1.js"></script>">http://code.jquery.com/jquery-1.9.1.js"></script></a>
<script src="/<a href="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>">http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script></a>
<script>
$(document).ready(function() {
$('#datepicker').each(function() {
$('#datepicker').datepicker({
changeYear: true,
changeMonth: true,
showOn: "button",
buttonImage: "/html/img/calendar.png",
buttonImageOnly: true,
buttonText: "Select date",
yearRange: $(this).data('year-range'),
dateFormat: 'dd.mm.yy'
 });
 })
 })
</script>
...
</head>

Обратите внимание, диапазон дат задается следующим образом: в input добавляем атрибут year-range  со значением диапазона (1901:1998).

<p><input type="text"name="calendar" id="datepicker" data-year-range="1901:1998" /></p>

screenshot 2016 09 05 09 45 43

screenshot 2016 09 05 09 50 46

 

jsfiddle.net/m5fvc22f/16/

jsfiddle.net/m5fvc22f/1/