jQuery UI DatePicker在对话框窗口打开

Question

我正在显示一个jQuery UI对话框窗口,其中包含一个jQuery UI datepicker控件.问题是对话框窗口中的第一个表单字段是日期选择器,因此它在窗口打开时获得焦点,这反过来导致日期选择器窗口自动打开.我不希望这种情况发生.

我试过打电话

$('#Date').datepicker('hide')

然后打开对话框窗口的功能,并且在使对话框打开的代码之后但是当它到达代码时它不起作用,则datepicker窗口尚未打开.

如何在对话框窗口显示时打开日期选择器窗口但在用户单击输入时仍然打开它？

Answer 1

您可以使用图标触发器:http://jqueryui.com/demos/datepicker/#icon-trigger

并且,如果需要,阻止用户键入日期.

我创建了一个带有日期选择器的对话框,并且无法在FF或Chrome中复制该问题.在IE浏览器中实现了它.

http://jsfiddle.net/458bM/2/

$(".datepicker").datepicker({
    dateFormat: 'yy-mm-dd '
});

$(".datepicker").datepicker("disable");

$("#dialog").dialog({
width: 400,
modal: true,
open: function(event, ui) {
    $(".datepicker").datepicker("enable");
    }
});

基于上一个答案:如何在对话框打开时模糊第一个表单输入

Answer 2

您可以在对话框未打开时禁用日期选择器.

$('#datepicker').datepicker({ 
    ...
    disabled: true 
});

$('#dialog').dialog({
    open: function(event, ui) {
        $('#datepicker').datepicker('enable');
    },
    close: function(event, ui) {
        $('#datepicker').datepicker('disable');
    },
    ...
});

请参阅此操作:http://jsfiddle.net/william/Rf37h/1/.