Input type date во всех браузерах

Понедельник, 15 Октябрь 2018 10:03

Input type date во всех браузерах

Автор Макс Пуля

размер шрифта уменьшить размер шрифта увеличить размер шрифта
Печать
Эл. почта
Поделитесь с друзьями этой статьей!
Станьте первым комментатором!

Оцените материал

(4379 голосов)

Input type date во всех браузерах jQuery Datepicker

Рабочий вариант <input type="date"> поддерживаемый во всех браузерах. Календарь от jQuery Datepicker работает в любом браузере.

Совсем недавно у меня появилась задача сделать некий калькулятор на php. Этот калькулятор должен высчитывать дату в зависимости от выбранной посетителем сайта. Конечно же, нужно использовать тег <input type="date">. Так я и сделал и всё шло очень хорошо. Но потом я стал смотреть, что у меня получилось в другом браузере Mozilla Firefox 53. Так вот в firefox календарь не отображается вообще! Мозилла не понимает значения date в атрибуте type и просто определяет его как type="text". Такое меня не устраивало, я не хотел терять посетителей, которые пользуются Мозиллой.

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

Смотрите сразу готовый пример по этой ссылке.

Вам нужно будет подключить следующие библиотеки:

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://epicblog.net/download/datepicker.js"></script>

И настройки скрипта:

<script>
  $( function() {
    $( "#datepicker" ).datepicker();
  } );
</script>

Затем тег input:

<p>Выбрать дату: <input type="text" id="datepicker"></p>

Вот полный пример страницы HTML с Datepicker:

<!doctype html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Пример работы jQuery Datepicker</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://epicblog.net/download/datepicker.js"></script>
  <script>
  $( function() {
    $( "#datepicker" ).datepicker();
  } );
  </script>
</head>
<body>
 
<p>Выбрать дату: <input type="text" id="datepicker"></p>
 
 
</body>
</html>

В моем примере, в файле скрипта под названием datepicker.js уже исправлен язык дней недели и месяцев (с английского на русский). А также неделя начинается с понедельника.

С этим разобрались! Теперь продолжим.

Как установить максимальную и минимальную даты в jQuery Datepicker

Максимальная дата

У нас будет три примера, как можно это сделать:

1. Устанавливаем точную максимальную дату, например, я установлю сегодняшнюю (на момент написания статьи 2018-10-15).

2. Плюс несколько дней от текущей (сегодняшней) даты (3) или же просто сегодняшний день это максимум, тогда 0.

3. Плюс несколько месяцев от текущей даты (+2m).

Код вот такой:

$(document).ready(function(){
 // Точная дата
 $('#datepicker1').datepicker({
  dateFormat: "yy-mm-dd",
  maxDate: new Date('2018-10-15')
 });

 // Количество дней
 $('#datepicker2').datepicker({
  dateFormat: "yy-mm-dd",
  maxDate: 3
 });

 // Плюс 2 месяца
 $('#datepicker3').datepicker({
  dateFormat: "yy-mm-dd",
  maxDate: "+2m"
 });
});

Пример максимальной даты смотрите по этой ссылке.

Минимальная дата

Здесь тоже самое, три примера, только наоборот. Описывать не буду, просто приведу код.

$(document).ready(function(){
 // Точная дата
 $('#datepicker1').datepicker({
  dateFormat: "yy-mm-dd",
  minDate: new Date('2017-12-5')
 });

 // Количество дней
 $('#datepicker2').datepicker({
  dateFormat: "yy-mm-dd",
  minDate: -3
 });

 // Минус 3 недели
 $('#datepicker3').datepicker({
  dateFormat: "yy-mm-dd",
  minDate: "-3w"
 });
});

Пример минимальной смотрите по этой ссылке.

Установить максимальную и минимальную даты

В этом примере мы установим максимальную дату плюс 2 месяца и 5 дней от текущей даты (сегодняшней). А минимальную дату установим на минус 7 дней от текущей даты. Код вот такой:

<script type='text/javascript'>
$(document).ready(function(){

 $('#datepicker').datepicker({
  dateFormat: "yy-mm-dd",
  maxDate:'+2m +5d',
  minDate: -7

 });

});
</script>

<div class='container'>
 <input type='text' id="datepicker" /> 
</div>

Пример максимальной и минимальной даты смотрите по этой ссылке.

Скачать готовые исходники можно по этой ссылке.

Всем удачи и добра!

Прочитано 8247 раз