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
精彩评论