Nickolay.info . PHP . Введення і обробка діапазону дат на PHP за допомогою JQuery.DatePicker
Часто на самих різних сайтах нам потрібно ввести діапазон дат, який може позначати все, що завгодно, наприклад, дні запланованого туристичного походу, період чергової відпустки або дати початку та закінчення семестру в навчальному закладі.
При цьому, "ручний" введення дат небажаний - висока ймовірність, що користувач або редактор сайту просто помиляться при наборі всіх цих точок і рисок. Та й уявлень про те, як вводити дату, існує не менше, ніж форматів дати, прийнятих в різних країнах. Тому дуже бажано мати компоненту, яка, по-перше, дозволить ввести дві дати за допомогою зручного спливаючого календаря, по-друге, не дасть "зіпсувати" їх вручну, по-третє, результат введення можна буде потім легко зберегти в базі даних в форматі , не що залежить від регіональних налаштувань.
Зрозуміло, сьогодні ніхто вже не програмує цю задачу "з нуля" (хоча ось тут я колись робив) - є ж бібліотека JQuery з безліччю розширень, в яких все вже запрограмовано. Зокрема, розширення DatePicker робить саме те, що нам потрібно.
На жаль, з версії JQuery 1.7 зручна можливість введення діапазону дат з DatePicker'а виключена (розробники обіцяють повернути її в майбутньому), так що використовуємо для прикладу jquery-1.6.2.min.js, в якому теж є все необхідне. З усього безлічі компонент бібліотеки JQuery UI (User Interface) нам знадобиться тільки файл ui.datepicker.min.js, а для русифікації нашого DаtePicker'а використовуємо файлик jquery-ui-i18n.js. Стильові настройки містить файл ui.datepicker.css, розташований в папці css.
<Meta http-equiv = "Content-Type" content = "text / html; charset = windows-1251"> <link type = "text / css" href = "css / ui.datepicker.css" rel = "stylesheet" > <script src = "js / jquery-1.6.2.min.js" type = "text / javascript"> </ script> <script src = "js / ui.datepicker.min.js" type = "text / javascript "> </ script> <script src =" js / jquery-ui-i18n.js "type =" text / javascript "> </ script>Все разом це майже 150 Кб коду, але що робити - така плата за красу і зручність. Та й не такий великий подібний трафік в наш час.
Це ще не весь Javascript-код, що нам доведеться включити на сторінку. Невеликий скрипт, розташований після завантаження бібліотек, займається налаштуванням нашого DatePicker'а:
<Script type = "text / javascript"> $ (function () {$ .datepicker.setDefaults ($ .extend ($. Datepicker.regional [ "ru"])); $ ( "# datepicker"). Datepicker ({ rangeSelect: true, minDate: "-1y", maxDate: "+ 1y", changeMonth: true, changeYear: true, dateFormat: "dd.mm.yy", defaultDate: null});}); </ Script>Тут дозволяється введення діапазону дат (повторимо, що працює це тільки в версіях JQuery молодше 1.7), мінімальна і максимальна дозволені дати ставляться на рік назад і вперед від поточної, дозволяється висновок списків для зміни місяці і роки, виставляється формат дати ДД.ММ.РРРР (наприклад, 21.12.2011) і датою за замовчуванням ставиться сьогоднішня.
Тепер нам залишилося "намалювати" форму HTML, содержащуюю текстове поле введення дати, скрипт "дізнається" його по атрибуту id = "datepicker".
<Form method = "post"> <input id = "datepicker" type = "text" name = "date12" size = "23" maxlength = "23" value = ""> </ form>Ось що вийшло (клацніть по полю і побачите, якщо мій сайт не лежить :)
Приклад був би неповним і не ставився б до розділу PHP, якби ми не сказали кілька слів про те, як зберігати отримані дати в базі даних MySQL і навпаки отримувати раніше збережені дати для виведення в DatePicker.
Оскільки на PHP я віддаю перевагу завжди зберігати дату як ціле bigint , Код буде призначений для таких випадків, потрібні коментарі дано прямо в тексті. Передбачається, що поле форми називається date12, як і в тексті вище.
// Приклад коду для отримання даних в datepicker з полів БД // date1 і date2 (початок і кінець періоду) типу bigint $ sql = 'select * from ТАБЛИЦЯ where id = "'. $ Id. '"'; $ Result = mysql_query ($ sql); if (! $ result or! mysql_num_rows ($ result)) {// Обробка помилки return; } $ Note = mysql_fetch_assoc ($ result); // Якщо отримана дата з бази - перетворити в формат поля, // інакше взяти за початок періоду поточну дату, за кінець - завтрашню if ($ note [ 'date1']) $ date1 = get_int_date ($ note [ 'date1']) ; else $ date1 = get_int_date (time ()); if ($ note [ 'date2']) $ date2 = get_int_date ($ note [ 'date2']); else $ date2 = get_int_date (time () + 86400); // Отримати дату для виведення в datepicker $ date12 = $ date1 .'- '. $ Date2; // Вивести форму із заповненою датою echo '<div align = "center"> <form method = "post"> <input id = "datepicker" type = "text" name = "date12" class = "button" size = " 23 "maxlength =" 23 "value =" '. $ date12.' "> </ form> '; // Код функції get_int_date: function get_int_date ($ d) {// Отримати дату з bigint return @date ( "dmY", $ d); } // Приклад коду для збереження даних, введених в datepicer, // в полях бази з іменами date1 і date2 (початок і кінець періоду) типу bigint $ date12 = htmlspecialchars (trim ($ _ POST [ 'date12'])); list ($ date1, $ date2) = @split ( '-', $ date12); $ Date1 = get_field_date (trim ($ date1)); $ Date2 = get_field_date (trim ($ date2)); // Змінна $ id містить ідентифікатор потрібного запису $ sql = 'update ТАБЛИЦЯ set date1 = "'. $ Date1. '", Date2 = "'. $ Date2. '" Where id = "'. $ Id. '"'; $ Result = mysql_query ($ sql); if (! $ result) {// Обробка помилки} // Код функції get_field_date: function get_field_date ($ date1) {// получть дату з поля введення $ errorlevel = ini_get ( 'error_reporting'); error_reporting (0); list ($ d, $ mon, $ y) = @split ( "\.", $ date1); $ Date1 = mktime (0,0,0, $ mon, $ d, $ y); error_reporting ($ errorlevel); return $ date1; }
Завантажити приклад в архіві ZIP (48 Кб)
Наша совместная команда Banwar.org. Сайт казино "Пари Матч" теперь доступен для всех желающих, жаждущих волнения и азартных приключений.