Рабочий вариант <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>
Пример максимальной и минимальной даты смотрите по этой ссылке.
Скачать готовые исходники можно по этой ссылке.
Всем удачи и добра!


Последнее от Макс Пуля
- Поворот текста, текст по диагонали CSS
- Как сделать верхний слой неактивным (некликабельным) CSS pointer-events
- VideoRoll.net - отзыв и обзор партнёрской программы по видеорекламе
- Высота iframe в зависимости от содержимого
- Ajax подгрузка контента по клику в div jQuery
- Скрыть / Показать DIV блок при выборе select пункта
- Как прибавить или вычесть процент от числа на PHP/JavaScript
- Как отключить просмотр исходного кода, проверку элемента и правую кнопку на сайте
- Новые планы: разработка мобильной игры
- Сервер, проекты и ffmpeg