Показывать jQueryUI datepicker при нажатии кнопки без использования поля ввода - PullRequest
Новая
       9

Показывать jQueryUI datepicker при нажатии кнопки без использования поля ввода

5 голосов
/ 17 октября 2011

В проекте ASP.NET я ищу способ, чтобы при нажатии кнопки появлялся jQueryUI datepicker, а затем вызывал обратную передачу при выборе даты. Я получил часть обратной передачи, работающую с использованием этого метода , но у меня возникают проблемы с тем, чтобы заставить средство выбора уходить, когда я этого хочу, или вести себя правильно, когда выбрана дата.

Я пробовал:

  • Прикрепление средства выбора к самой кнопке, но оно устанавливает текст кнопки на выбранную дату после того, как я выбрал и до того, как произошла обратная передача, чего я не хочу.
  • Присоединение средства выбора к кнопке и установка опции altField для <input type='text' />, который расположен вне окна браузера, но он все еще устанавливает текст кнопки, когда выбирается дата.
  • Сделав его встроенным, прикрепив его к div и создав его в onclick кнопки. Но, согласно этого сообщения на форуме , встроенный механизм выбора даты по дизайну не показывает кнопку «Готово», и я не могу закрыть ее, щелкнув за ее пределами.
    • Я попытался добавить собственную кнопку «Готово» в контейнер кнопок средства выбора даты (который отображается, если установлено showButtonPanel), но он исчезает, когда меняется месяц или год, и ни одно из событий, которые я могу связать, кажется позвольте мне добавить его обратно.
    • Я попытался присоединить обработчик mouseup к телу документа, чтобы я мог отклонить средство выбора даты, когда щелкаю его снаружи, но это срабатывает, когда я также щелкаю в устройстве выбора даты, и, похоже, вообще не позволяет работать средству выбора.

Какой здесь лучший подход?

1 Ответ

7 голосов
/ 17 октября 2011

Ранее я использовал скрытое поле input и прикрепил к нему средство выбора даты с успешными результатами: 

$("#date").datepicker({...}); // #date has style display='none'

$("#show-date").click(function () {
    $("#date").datepicker("show");
});

Пример: http://jsfiddle.net/7pttr/

...