Статьи

Совет: создайте кроссбраузерный сборщик дат за считанные минуты

В этом кратком совете я покажу вам, как использовать новый ввод даты в HTML5, а затем предоставлю альтернативное решение jQuery UI для браузеров, которые еще не поддерживают этот новый тип ввода.



Мы все были там. Вы создали форму, и теперь вам нужно, чтобы пользователь ввел дату. Но как вы контролируете, в каком формате они вводят дату? Не было бы проще, если бы мы могли использовать элемент управления календаря или средство выбора даты? Абсолютно! К сожалению, только несколько браузеров поддерживают новый тип ввода date HTML5. Это нормально, но мы будем использовать jQuery UI, чтобы обеспечить запасной вариант!


Давайте сначала спланируем будущее и предположим, что пользователь работает в современном браузере, который поддерживает средство выбора даты.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
<!DOCTYPE html>
 
<html lang=”en”>
<head>
   <meta charset=”utf-8″>
   <title>Date Picker</title>
 
</head>
<body>
 
<input type=”date” name=”date” id=”date” value=”” />
 
</body>
</html>

На момент написания этой статьи только Webkit и Opera поддерживают этот тип ввода. В Firefox и Internet Explorer браузером по умолчанию будет простое текстовое поле – не идеально!

Поддержка браузера

Давайте использовать jQuery UI для компенсации.


Средство выбора даты в jQuery UI прекрасно работает и легко поддается установке. Сначала мы загружаем настроенную версию пользовательского интерфейса jQuery. Посетите страницу загрузки и отметьте только элементы «Core» и «Datepicker». Оставьте все остальное непроверенным.

Страница загрузок

Нажмите «Загрузить», и вы получите почтовый индекс, содержащий необходимые файлы. Перенесите в свой проект файл jQuery UI и каталог CSS.


С jQuery UI, импортированным в наше дерево каталогов, нам нужно включить необходимые файлы, в частности, файлы CSS и JavaScript.

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
<!DOCTYPE html>
 
<html lang=”en”>
<head>
   <meta charset=”utf-8″>
   <title>Datepicker</title>
   <link href=”css/redmond/jquery-ui-1.8.13.custom.css” rel=”stylesheet” />
</head>
<body>
 
<input type=”date” name=”date” id=”date” value=”” />
 
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js”></script>
<script src=”js/jquery-ui.js”></script>
 
</body>
</html>

Обратите внимание, как мы включили нашу пользовательскую таблицу стилей пользовательского интерфейса jQuery, библиотеку jQuery (в настоящее время версия 1.6) и пользовательский сценарий пользовательского интерфейса jQuery, который я переименовал в jquery-ui.js .


Наша база установлена; Теперь нам нужно запросить в DOM нужный элемент ввода и вызвать для него метод datepicker() .

1
2
3
4
5
6
<script src=”js/jquery-ui.js”></script>
<script>
 
$(‘#date’).datepicker();
 
</script>

Только эти несколько персонажей сделают свое дело. Если мы теперь просмотрим страницу в Firefox и нажмем на элемент ввода, вы увидите действующий указатель даты.

Datepicker Control

То, что у нас здесь работает, но есть одна проблема. Если мы вернемся к продвинутому браузеру, такому как Chrome, то теперь у нас двойная обязанность. Как нативные, так и резервные средства выбора даты действуют одновременно. Нам нужен способ указать, что, если браузер поддерживает тип ввода date , ничего не делать. Это легко!

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
 
<html lang=”en”>
<head>
   <meta charset=”utf-8″>
   <title>Datepicker</title>
   <link href=”css/redmond/jquery-ui-1.8.13.custom.css” rel=”stylesheet” />
</head>
<body>
 
<input type=”date” name=”date” id=”date” value=”” />
 
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js”></script>
<script src=”js/jquery-ui.js”></script>
<script>
   (function() {
      var elem = document.createElement(‘input’);
      elem.setAttribute(‘type’, ‘date’);
 
      if ( elem.type === ‘text’ ) {
         $(‘#date’).datepicker();
      }
   })();
 
</script>
</body>
</html>

В реальном проекте вы, скорее всего, абстрагируете этот тестовый код от его собственного метода или используете Modernizr , но это пригодится для целей тестирования.

В приведенном выше коде мы сначала создаем элемент input, а затем пытаемся установить его атрибут type равным date . Теперь, если браузер не в состоянии это сделать – то есть он не понимает, какой тип date – мы можем предположить, что это более старый браузер, и вместо этого предоставить запасной вариант jQuery UI. Просто!


Инструмент выбора даты поставляется с множеством переопределений; Вы можете просмотреть весь список здесь.


Параметры

Давайте рассмотрим пару вместе. Что делать, если вы хотите указать конкретный формат даты. Вместо Y/M/D мы бы предпочли использовать YMD . Для этого мы используем свойство dateFormat .

1
2
3
$(‘#date’).datepicker({
   dateFormat: ‘yy-mm-dd’
});

Ну, это было легко. Далее, допустим, что мы хотим, чтобы пользователь мог выбирать дату только сейчас и через четыре дня. Это удобно, когда мы используем опцию maxDate . Одна полезная особенность заключается в том, что мы можем использовать относительные термины, такие как +4, в течение четырех дней.

1
2
3
$(‘#date’).datepicker({
   maxDate: +4
});

Мы только царапаем поверхность, но это должно помочь вам начать! Кроссбраузерный сборщик дат за считанные минуты!