Расширение пользовательского интерфейса jQuery для модальности выбора даты - PullRequest
Новая
       8

Расширение пользовательского интерфейса jQuery для модальности выбора даты

1 голос
/ 04 августа 2011

Интересно, что средство выбора даты jQuery UI не имеет возможности отображать модальное всплывающее окно, в отличие от обычного диалога:

Кто-нибудь знает расширение для добавления такой функциональности?

Примечание: Прямо сейчас я катился сам, делая что-то вроде 

'beforeShow': function(input, inst) {
   $('.menu-overlay').height($(document).height());
   $('.menu-overlay').toggle();
}
'onClose': function(dateText, inst) {
   $('.menu-overlay').toggle();
}

Где наложение меню - это полупрозрачный div на 100% высоты / ширины, который работает несколько. Но я бы предпочел jquery для обработки модальности

1 Ответ

2 голосов
/ 06 августа 2011

У меня точно такая же проблема ... Вот что я делаю, чтобы решить ее:

  • Я создаю встроенный указатель даты (т.е. присоединяю его к элементу div, а не к входу)
  • Я добавляю этот div к другому, который я создаю на лету
  • Я делаю этот новый div модальным диалогом

При использовании этого метода указатель даты появляется в «стандартном» моде jQueryUI. 

$.fn.modal_dialog = function(){
                modal_dialog_div = $("<div />", {'class': 'modal_datepicker_dialog'})
                modal_datepicker_div = $("<div />", {'class': 'modal_datepicker_datepicker', 'height': '200px', 'width':'200px'})   
                modal_dialog_div.append(modal_datepicker_div);  
                modal_dialog_div.dialog({modal: true})
                modal_datepicker_div.datepicker({altField: "#" + $(this).attr('id'), onSelect: function(dateText, inst) { modal_dialog_div.dialog('destroy');modal_dialog_div.remove()}, defaultDate: $(this).val()})

            }

И я называю это на входе, вот так: 

<input type="text" id="datepicker_result1" onclick="javascript:$(this).modal_dialog()" value="08/15/2011"/>

Что вы думаете?

PJ

...