2015-04-29 6 views
1

Кнопка «Сегодня» в моей установке Jquery UI Datepicker работает после двух щелчков мыши, она должна работать с первого щелчка, и обе кнопки не работают вообще при использовании на мобильном устройстве, таком как iPhone.UI Кнопки Datepicker не работают

enter image description here

Я соединили живой тест здесь: http://loai.directory/test

Что мне не хватает? Я попытался установить и настроить библиотеку пользовательского интерфейса, но безрезультатно.

+0

Он работает с использованием хром на моем устройстве Android. –

+0

Вы попробовали это на рабочем столе? Кнопка «Сегодня» работает только при двойном щелчке – Leo

+0

Да, это работает, когда я нажимаю один раз на обоих устройствах. –

ответ

1

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

Я бы посмотрел на слушателя, который срабатывает при нажатии Select Today. Попробуйте добавить команду к этому слушателю, которая обновляет отображение календаря; см., в частности, the #refresh method in the Jquery UI Datepicker API.

EDIT (дополнительные указания):

ИТАК первый вам нужен слушатель, который определяет, когда пользователь нажимает на кнопку Сегодня. Когда я перейду на тестовую страницу (в Chrome), щелкните правой кнопкой мыши на кнопке «Выбрать сегодня» виджета и нажмите «Осмотреть элемент», это покажет мне необработанный HTML-код для этого элемента. Я вижу, что у кнопки есть класс datepicker-current, который выглядит довольно уникально, поэтому я настрою слушателя для этого класса.

$('.datepicker-current').click(function(){ 
    // we'll do the refresh command inside here 
}); 

Затем нам нужно выяснить, как сообщить виджету обновить себя. В виджетах JQuery UI есть приличная документация, и здесь они кратко объясняют функцию «обновления» с кратким примером. После этого примера, команда обновления будет выглядеть примерно так:

$('.datepicker-current').click(function(){ 
    $((something)).datepicker("refresh"); 
}); 

Мы называем это .datepicker команды на текстовом поле элемента, поэтому мы должны выяснить способ, чтобы выбрать этот элемент. В вашем случае похоже, что в текстовых полях у каждого из них есть класс hasDatepicker, поэтому я просто выберу все из них и вызову обновление во всех виджетах (независимо от того, видны они сейчас или нет):

$('.datepicker-current').click(function(){ 
    $('.hasDatepicker').datepicker("refresh"); 
}); 

Вы можете скопировать & вставьте эти 3 строки прямо в консоль Chrome, чтобы добавить слушателя Jquery на живую страницу, а затем попробуйте сами. Но что-то вроде выше должно выполнить то, о чем вы говорите.

Возможно, вы, возможно, сделали это только с этим последним фрагментом, но я хотел показать вам весь мой мыслительный процесс, чтобы подчеркнуть, что Jquery не является магии, вы просто должны быть готовы продумать элементы HTML и попробуйте выполнить шаг за шагом в консоли Chrome.

+0

Не следует ли применять этот плагин по умолчанию? – Leo

+0

Я бы так подумал ... но это явно не так. Я хочу сказать, что стоит поиграть. –

+0

Хотя я не очень хорошо разбираюсь в juqury и JavaScript, даст ему игру. Спасибо :) – Leo

0

После того, как я выкопал, я обнаружил, что кнопка «не работает», потому что она не делает то, что «я думал», что она должна делать!

Их код на самом деле не сломан. Он просто не делает то, что ожидали бы большинство людей, которых ожидало бы . Который должен ввести сегодняшнюю дату во вход .То, что он делает, - это то, что пользователь видит сегодняшнюю дату в календаре . Если они были отключены через месяц или другой год, календарь возвращается к сегодняшнему мнению, не отменяя выделение даты, которую уже выбрал пользователь .

Цитируется из первого ответа здесь: Today button in jQuery Datepicker doesn't work

Таким образом, подход к этой проблеме не находя, что было неправильно, но как настроить его параметры. Ниже приведен фрагмент, который сделал мне работу :) - не уверен, что это лучший подход, хотя - так что любые мысли об этом будут замечательными :)

$.datepicker._gotoToday = function (id) { $(id).datepicker('setDate', new Date()).datepicker('hide').blur(); }; 
Смежные вопросы