Собственно, озаботился темой летом, когда был нужен соответствующий простой календарик на JavaScript для редактирования полей формы в MySQL DATE/DATETIME формате.
Напомню, стандартный MySQL DATE формат это date(‘Y-m-d’) на PHP, то есть YYYY-MM-DD или ГГГГ-ММ-ДД, где ГГГГ – четыре цифры года, ММ – две цифры месяца с возможным ведущим нулём, и ДД – то же самое для дня (то есть ведущий нуль для чисел меньших 10 обязателен).
Этот формат внутри MySQL допускает разные вариации и сокращения, но меня для вставки в мою БД интересует только этот стандартный вид.
Для MySQL DATETIME к дате прибавляем ещё строку времени вида hh:mm:ss то есть час, минута, секунда также с возможными ведущими нулями.
Итак, полный MySQL DATE формат – YYYY-MM-DD
полный MySQL DATETIME формат – YYYY-MM-DD hh:mm:ss (или date(‘Y-m-d H:i:s’) в PHP)
Так вот, мне был нужен механизм, позволящий наглядно вставлять данные такого типа в поля формочек, которые потом отсылались серверу для записи в таблицы наших баз данных.
Честно говоря, уже года три-четыре я пользовался календариком на JavaScript, простым и в меру удобным, скачал его ещё в то время, но этим летом он мне уже не подошёл, так как позволял вставлять только даты, без времени.
Тогда я начал поиск нового простого Javascript календаря, который кроме дат позволяет в формочку вставить так же время в нужном мне формате. Долгие часы поиска (гугления) по запросам типа ‘javascript datetime calendar‘ либо ‘javascript datetime picker‘ (picker наверное правильней, именно нам нужен именно пикер, то есть выборщик даты-времени) и близких к нему выводили меня не туда куда нужно.
Наиболее близкий вариант оказался timepicker addon к jQuery UI Datepicker (http://trentrichardson.com/examples/timepicker/), то есть демки на этой страничке соответсовали моим хотениям, но он казался слишком замороченным и там не было секунд, а секунды для нас важны как неотъемлемый элемент DATETIME формата для MySQL. Пусть даже секунды в 00 стоят, но они нам нужны!
Да, и ещё этот пикер тянет за собой библиотеку jQuery UI, чего мне не очень хотелось, хотя я сам применяю в том проекте pure jQuery. То есть в принципе мне бы подошёл такой пикер требующий pure jQuery (pure ещё одно англ.слово которое я никак не могу перевести на русский так чтобы оно мне понравилось и соответствовало бы моим ощущениям правильного использования) 🙂 *во завернул, аж самому не смешно*
Мне чего-то попроще, пошустрее и попонятней, чтобы без проблем можно было добавлять его (этот javascript’овский calendar или picker) в свои проекты.
И наконец! Как говорится – кто ищёт тот всегда найдёт – я наткнулся на это чудо –
http://www.rainforestnet.com/datetimepicker/datetimepicker.htm
Господа, это чудо-календарик! Спасибо создателю его некоему TengYong Ng.
99,9% идеален. А чтоже 0,1%?
Конечно, он перегружен некоторыми ненужными мне фичами – например, время в AM/PM формате, зачем он мне пока не нужно в общем, хотя может и пригодится, и вызов у него не совсем подходящий – ну короче, согласитесь, всегда есть что к чему-нибудь – да ко всему можно придраться, ведь верно? Нет на этом белом свете идеалов, может есть, но мне они пока не попадались.
Я взялся за этот календарик, подкромсал его, перенастроил выборку его, то есть вызов для нужных полей, оставил только 24-вой формат без AM/PM, и получилась моя вкусняшка. 🙂 скачать – смотри далее
Для своих проектов я оставил возможность выбора календарика из таких типов –
1. Со списком месяцев-годов, если требуется вводить далёкие от сегодняшнего времени даты, дни рождения например, потому что тридцать-сорок раз кликать по стрелочке “год назад” не очень приятно, верно?
2. С выбором времени (часы-минуты-секунды) и без оного.
3. Стрелочки – только текстовые, то есть для работы этого календаря вообще не требуется больше ничего, только небольшой сравнительно js-файлик.
4. Переписал названия месяцев и дней недели на русском языке.
И он был написан на pure JavaScript то есть не тянул за собой никаких либов, что очень приятно, но я по мере упрощения чуть-чуть добавил jQuery, не везде конечно, только там где я что-то подкромсал, поэтому сейчас для его работы требуется jQuery, но по идее я могу его переписать убрав необходимость тянуть за ним jQuery -там по-моему я только в самом конце в перехватичике нажатий клавиш – чтобы сркыть picker если он был – применил обёртку jQuery, ибо она сокращает код в несколько раз и не требует детальных знаний javascript, которых у меня конечно нет.
Правда, этот скрипт нуждается в тотальной переработке – ибо использует глобальные переменные, а не скрывает всё в теле своего объекта, как это в принципе наверное должны делать все достойные javascript либы.
Поэтому я его перепишу наверное в ближайшее время и выложу где-нибудь на sourceforge, наверное, надо будет сделать поддержку нескольких языков (хотя бы en,ru,fr,de,esp,ita,port,swe,dutch,polska,chi-tr,chi-упрощённый,jap,kor,arabic,ukr,bel,kaz,tur и другие, даже не знаю, какие ещё языки есть?)
А пока на русском языке можно скачать его здесь – скачать easy js datetime picker для MySQL DATE/DATETIME полей
Замечу ещё раз – этот скрипт с русскими названиями дней недели и месяцев, в кодировке ANSI (Windows-1251), Linux EOL формате, и для перехвата события глобального щелчка мыши в области окна странички с календариком использует jQuery (наверно любая версия jQuery подойдёт, вплоть от 1.4, ранние есть вообще сейчас не знаю).
Формат применения –
NewCssCal(elementDOM, pShowTime, pScroller)
elementDOM – JavaScript элемент DOM. Имеет смысл наверное только для <input type=”text”>, ибо сюда вставляется выбранная дата и время (если есть), а также отсюда считывается текущие значения даты/времени для показа в календарике. REQUIRED!
pShowTime – BOOL будем ли вводить+показывать время (default – true)
pScroller – string (DROPDOWN или ARROW) если DROPDOWN, то будем использовать списки выбора для годов и месяцев (default – ARROW)
Пример: используя jQuery, подключим календарики ко всем полям ввода имеющим класс card-dtm с парой особенностей – если поле имеет id dk-dtbirth, то подключим календарик со списком выбора лет и месяцев, если длина значений поля более 10, то подключаем календарик с возможностью выбора также и времени.
Для нашего примера поля по-идее должны быть уже заполнены значениями из MySQL таблицы и быть вида 0000-00-00 00:00:00 для DATETIME полей и вида 0000-00-00 для простых DATE полей (естественно это применимо только к нашему примеру):
// подключаем календарики для полей дат (используем обертки jQuery)
$('.card-dtm').each(function(){
if(this.id=='dk-dtbirth')
// для Дней Рождений
$(this).click(function(e){NewCssCal(e.target,false,'DROPDOWN');});
else if($(this).val().length > 10)
// по умолчанию со временем
$(this).click(function(e){NewCssCal(e.target);});
else
// только даты
$(this).click(function(e){NewCssCal(e.target,false);});
});Скриншоты 3-х различных возможных состояний easy js datetime picker – (то есть простого в применении js выборки времени-даты для форматов MySQL DATE/DATETIME)
Обычный (полный) вид с возможностью выбрать время вплоть до секунды!
Стандратный вид выборки даты
Вид с pScroller==’DROPDOWN’, позволяет быстро выбрать практически любой год и месяц из списка (диапазон лет задаётся внутри скрипта календарика)
Да, и как я уже писал, я хочу этот скрипт тотально переработать, написать 2 версии – с поддержкой jQuery и на pure JavaScript, сделать всё грамотно, чтобы не знагрязнять глобальное пространство имён, возможно вернуть PM/AM.
Для версии под jQuery наверное будет иметь смысл применить его как часть jQuery.fn для подключения к обернутым наборам, создаваемыми этой прекрасной либой (либа пишется и звучит короче чем библиотека, не правда ли, простите мне этот очередной американизм – может лучше писать его латиницей, то есть так – lib?)
Что ещё надо для счастья? Стакан хорошего чая с 2-мя ложками сахара без верха, и пирожное трубочка с кремом, или на худой конец, луговое.
Удачной охоты!
