Javascript jQuery日期选择器：在单击日期时防止关闭选择器

大家好，斯塔克尔斯先生

我正在使用，连同插件。一切都很好，除了在datepicker中单击日期会关闭小部件，没有时间选择时间

问：所以我想知道是否有一种方法可以防止小部件在单击日期时关闭，而是强制用户单击在启用showButtonPanel:true选项或在小部件外部单击时显示的“完成”按钮。我不希望我的用户不得不打开小部件两次！看到行为了吗

任何解决此问题的帮助，甚至是正确方向的指点，都将不胜感激

更多信息： 我正在使用Martins下载链接提供的文件：

jquery-ui-1.7.2.custom.min.js timepicker.js最新版本0.2.0 以下是我正在使用的选项：

$(document).ready(function(){
    $(".datepicker").datepicker({
        duration: '',  
        showTime: true,  
        constrainInput: false,  
        stepMinutes: 5,  
        stepHours: 1, 
        time24h: true,
        dateFormat: "yy-mm-dd",
        buttonImage: '/static/images/datepicker.png',
        buttonImageOnly: true,
        firstDay: 1,
        monthNames: ['Januari','Februari','Mars','April','Maj','Juni','Juli','Augusti','September','Oktober','November','December'],
        showOn: 'both',
        showButtonPanel: true
     });
})

---

你必须亲自破解日期选择器。这是它使用的代码。如果它不是内联的，则当您选择日期时，它将隐藏

您可以传入自己的onSelect方法，快速将datePicker实例更改为内联，然后将其更改回内联，而无需更改datePicker的内部结构，但这是一个非常粗糙的解决方案

if (inst.inline)
        this._updateDatepicker(inst);
else {
      this._hideDatepicker(null, this._get(inst, 'duration'));
      this._lastInput = inst.input[0];
      if (typeof(inst.input[0]) != 'object')
      inst.input[0].focus(); // restore focus
      this._lastInput = null;
}

---

作为参考，因为有人通过邮件问我这个问题。下面是需要添加到timepicker.js的代码块：

/**
 * Don't hide the date picker when clicking a date
 */
$.datepicker._selectDateOverload = $.datepicker._selectDate;
$.datepicker._selectDate = function(id, dateStr) {
    var target = $(id);
    var inst = this._getInst(target[0]);
    inst.inline = true;
    $.datepicker._selectDateOverload(id, dateStr);
    inst.inline = false;
    this._updateDatepicker(inst);
}

---

祝你好运，让它在你的网站上工作

按照Emil的建议，我找到了一种更好更简单的方法来修改小部件，以支持在选择事件时不关闭小部件

首先，我在小部件上的defaults dict中添加了另一个属性：

closeOnSelect:true //True to close the widget when you select a date

其次，在_selectDate方法中找到此语句：

if (inst.inline)
        this._updateDatepicker(inst);
else {
        ...
    }

并将条件更改为如下所示：

var closeOnSelect = this._get(inst, "closeOnSelect");        
if (inst.inline || !closeOnSelect)
        this._updateDatepicker(inst);
else {
        ...
    }

---

试试看，它对我有用。我是在JQuery UI 1.8.5版本上完成的。

很酷，如果您使用JQuery-UI-1.8.5.custom.min.js和JQuery-UI.multidatespicker.js，您可以修改JQuery-UI-1.8.5.custom.min.js： 发件人：

进入：

---

与其更改源，不如使用现有事件

onSelect: function() {
    $(this).data('datepicker').inline = true;                               
},
onClose: function() {
    $(this).data('datepicker').inline = false;
}

---

好吧，这是一个肮脏的解决办法…但它对我有效…即使有ShowButton Panel:真的

---

您应该重写本机js函数：

 /* Update the input field with the selected date. */
        _selectDate: function(id, dateStr) {
            var target = $(id);
            var inst = this._getInst(target[0]);
            dateStr = (dateStr != null ? dateStr : this._formatDate(inst));
            if (inst.input)
                inst.input.val(dateStr);
            this._updateAlternate(inst);
            var onSelect = this._get(inst, 'onSelect');
            if (onSelect)
                onSelect.apply((inst.input ? inst.input[0] : null), [dateStr, inst]);  // trigger custom callback
            else if (inst.input)
                inst.input.trigger('change'); // fire the change event
            if (inst.inline)
                this._updateDatepicker(inst);
            else {
                if(inst.settings.hideOnSelect != false){
                    this._hideDatepicker();
                }
                this._lastInput = inst.input[0];
                if (typeof(inst.input[0]) != 'object')
                    inst.input.focus(); // restore focus
                this._lastInput = null;
            }
        },

并向datepicker配置添加适当的选项，例如：

var defaultDatePickerOptions = {
        hideOnSelect: false,
        ...
    }; 
 var birthDate = jQuery.extend({}, defaultDatePickerOptions);
 $('#birthdate').datepicker(birthDate);

以下是一个解决方案：

onSelect: function ( dateText, inst ) {
    ..... // Your code like $(this).val( dateText );`


    //Set inline to true to force "no close"
    inst.inline = true;
},
onClose: function(date,inst){
    //Set inline to false => datapicker is closed
    // onClose is called only if you click outside the datapicker, onSelect will not
    // trig onClose due to inline = true
   inst.inline = false;
}

---

`

为什么所有注释都提供解决方法？它是straigtfarword：

将内联日历与altField一起使用：

    <input type="text" id="alternate" size="30" />
    <div id="datepicker"></div>

    <script>
       $("#datepicker").datepicker({
          altField: "#alternate"
       });
    </script>

检查这把小提琴：

---

---

非常感谢redsquare，你的回答让我找到了正确的方向。似乎onSelect只在选择日期时触发，所以只要在select上调用实例上的show就可以得到我想要的行为。。。onSelect:functiondateText，inst{inst.show；}不，是我的错。上面抛出了一个错误，似乎阻止了选择器隐藏。我还是不能让你的建议起作用。如果我将其设置为“内联”，则“完成”按钮将消失，除了单击窗口外，没有其他方法关闭窗口。我试图设置一个超时并将内联模式重置为无效。好的，我找到了第二种方法来做我想做的事情。实际上，可以使用自定义方法覆盖_selectDate方法，上面提供的代码来自于此。该方法包含与原始文件中完全相同的代码，但没有_hideDatepicker行。很简单，也很老套，但很有效。很高兴你把它整理好了，埃米尔。好运+1一个老问题，但仍然有效！感谢您添加此引用。@zaf:感谢您回复我，并投票：此操作有效，但在选择日期时会滚动到屏幕顶部……至少在Chrome中是这样。此错误为：未捕获范围错误：最大调用堆栈大小exceeded@OmidHezaveh当前位置您可能没有正确地复制内容。记下名称_selectDate重载和_selectDate。它们需要不同。请注意，这个问题在当前版本的TimePicker插件中不再是问题。@JamesMcGrath:谢谢，很高兴知道@路西法：对不起，没有。你用错了。如果你有问题，写一个新的，尽可能多的信息。你可能会在几个小时内得到回复。这是一个更好的解决方案。注意：如果已启用showButtonPanel:true，则这将删除“完成”按钮。我还没有找到阻止这种行为的方法。非常感谢。这是一个完美的解决方案。@PhilMoorhouse有点晚了，但可能仍然对某些人有帮助：在jquery ui中，您会发现一个_generateHTML函数，如果实例具有inline:trueset，该函数将不会添加“完成”按钮。您可以在此处搜索唯一出现的ui datepicker close并消除此行为。@Min-Hur:这有点好，但如果datepicker上有一个按钮，则如果使用此代码，它将不可见。请告诉我如何防止在选择日期时关闭日期选择器和阻止其上的按钮。当您使用js进行自定义样式时，此解决方案不好，因为它会重新初始化日期选择器弹出窗口。所有的 $this.data'datepicker.inline=true之后的更改消失；

var defaultDatePickerOptions = {
        hideOnSelect: false,
        ...
    }; 
 var birthDate = jQuery.extend({}, defaultDatePickerOptions);
 $('#birthdate').datepicker(birthDate);

onSelect: function ( dateText, inst ) {
    ..... // Your code like $(this).val( dateText );`


    //Set inline to true to force "no close"
    inst.inline = true;
},
onClose: function(date,inst){
    //Set inline to false => datapicker is closed
    // onClose is called only if you click outside the datapicker, onSelect will not
    // trig onClose due to inline = true
   inst.inline = false;
}

    <input type="text" id="alternate" size="30" />
    <div id="datepicker"></div>

    <script>
       $("#datepicker").datepicker({
          altField: "#alternate"
       });
    </script>