开发者

jQuery UI extension to make date picker modal

Interestingly, the jQuery UI date picker has no option to displ开发者_开发百科ay a modal popup, unlike the regular dialog:

  • http://jqueryui.com/demos/datepicker/
  • http://jqueryui.com/demos/dialog/

Does anyone know of an extension to add such functionality?

Note: Right now I rolled my own, doing something like

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

Where the menu-overlay is a 100% height/width semi-opaque div, which works somewhat. But I'd prefer jquery to handle modality


I have the exact same problem... Here is what I am doing to solve it:

  • I create the datepicker inline (i.e. attach it to a div, not an input)
  • I append this div to another one that I create on the fly
  • I make this new div a modal dialog

With this method, the datepicker appears within a "standard" jQueryUI modal.

$.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()})

            }

And I call this on an input, like this:

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

What do you think?

PJ

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜