2014-02-02 2 views
0

(Являясь новичком JS, как и я, я действительно искушаюсь просто использовать одно поле ввода и обрабатывать все это одним быстрым быстрым в PHP, который является очень моим элементом. Но я также хочу попробовать и научиться жить с JS.)jQuery UI DateTimePicker Spit для отдельных элементов

Использование jquery-ui-timepicker-addon.js, мне нужно разделить вклад в соответствующие поля year,month,day,hour,minutes..

Я нашел некоторые другие подобные вопросы here on SE, но они включают в себя только нормальные сборщика времени UI, который обеспечивает только год, месяц, день тройной (никогда не понимал почему).

Однако, используя эти ресурсы, я «взломал» что-то, что почти работает, но проблема в том, что поле, которое нажимается для запуска сборщика, всегда заполняется ВСЕМИ значениями ...

DEMO: http://jsfiddle.net/obmerk99/9Tk69/2/

Теперь, идя немного дальше, мне удалось разделить также hour:minute пара ..

DEMO: http://jsfiddle.net/obmerk99/9Tk69/3/

Но до сих пор остаются некоторые проблемы ..

1 - Это должен быть самый уродливый код в истории человечества (или, по крайней мере, JS) - должны быть лучшие способы сделать это. Если бы кто-то представил мне эквивалентный PHP-код, я был бы унижен.

2 - поле ввода, который становится срабатывает до сих пор получить все входные ..

3 - Он работает нормально, только если TIME прикосновении. если установлен только DATE, timesplit[0] не будет определен ...

4 - Я не могу заставить ОБОИХ работать, в минуту щелкнули ДАТА ИЛИ ЧАСЫ ИЛИ секунда - фокус утерян.

EDIT Я

Better working Demo

Это в основном @Steve Wellens answer,

getYear() должен быть изменен на getFullYear ..

Проблема первого триггера поля все еще остается (получить полные значения) при размытии, а также - он работает, только если все значения будут затронуты .. (если вы не измените час, это будет пробел)

На данный момент я считаю, что использование ОДНОГО поля и разделение на PHP будет моим лучшим вариантом (наряду с HTML5 для тех, у кого это есть).

Законченное с учетом this ..

+0

Было бы проще использовать входные данные даты и времени HTML5 (либо дату-время для одного входа, либо отдельные даты и время) и полагаться на собственные сборщики? Может быть не вариант, если вам нужно поддерживать много старых браузеров, хотя вы можете использовать Modernizr для обнаружения поддержки типов ввода и использования пользовательского интерфейса jQuery в качестве резервной копии. Разделение ваших элементов таким образом кажется рецептом для огромного количества ненужного горя. –

+0

hmmm .. Хорошая точка :-) Но, к сожалению, мне нужно поддерживать старые (ish) браузеры. по крайней мере, как запасной, как вы сказали. Честно говоря, мой FIREFOX (26) даже не полностью поддерживает это. –

+0

Я бы просто пошел вперед и использовал входы HTML5, если только не существует насущной причины, по которой вам нужно, чтобы это было разделено таким образом. Таким образом, вы знаете, что это будет работать на современных мобильных устройствах, и если вам нужно реализовать резервную копию, это должно быть довольно просто - используйте Modernizr для обнаружения поддержки входов HTML5 с использованием атрибута inputtypes, а если его нет, примените выбор даты по вашему выбору. Я сделал это раньше в приложении Phonegap, и он работал абсолютно нормально. Я бы не стал раскалывать входы, подобные чуме, если это абсолютно необходимо. –

ответ

0

Вы можете попробовать это так (я только сделал несколько полей):

jQuery(document).ready(function() { 

    jQuery('.countdown-timepicker').datetimepicker({ 
     onSelect: function (dateText, inst) { 
      var FullDate = new Date(dateText); 

      jQuery('.mydate_date_day').val(FullDate.getDate()); 
      jQuery('.mydate_date_month').val(FullDate.getMonth()); 
      jQuery('.mydate_time_hour').val(FullDate.getHours()); 
     } 
    }); 
}); 

PS: Это кажется неправильным быть выбора отдельных элементов с помощью класса.

+0

Спасибо .. это вид работ, но триггерное поле по-прежнему получает полную дату. Кроме того, getYear() следует изменить на [getFullYear] (http://stackoverflow.com/questions/4754938/javascript-date-getyear-returns-111-in-2011). См. Редактировать –

Смежные вопросы