JQUERY-UI：Datepicker - 禁用日期点击事件答案

【问题标题】：JQUERY-UI: Datepicker - Disable day click eventJQUERY-UI：Datepicker - 禁用日期点击事件
【发布时间】：2012-01-06 07:37:03
【问题描述】：

我目前有一个将月份和年份更改设置为 true 的日期选择器...但作为我的用户体验报告反馈的一部分，他们不喜欢日期选择器在选择日期时自动关闭，因为有时他们会更改日期以从月、日和年中随机选择的顺序。因此，例如，如果他们先更改日期，然后选择月，然后选择日，则日期选择器会自动关闭，而年份保持不变。

所以我一直在寻找类似 datepicker 的东西，它只是设置值而不触发关闭事件，当 showButtonPanel 设置为 true 时，仅将关闭事件委托给 Done 按钮。

有什么想法可以实现吗？

这是我的代码 sn-p：

<script type="text/javascript">
$(function() {
    $('#datepicker').datepicker({
        changeMonth: true,
        changeYear: true,
  showButtonPanel: true,
  yearRange: 'c-70:c+nn'
    });
});

【问题讨论】：

标签： jquery jquery-ui jquery-ui-datepicker

【解决方案1】：

试试这个（我假设你正在使用 jqueryui datepicker）：

$(function() {
        $('#datepicker').datepicker({
           onSelect: function(dateText, inst) { inst.show() }
        });
    });

【讨论】：

这会在 chrome 控制台中生成 Uncaught TypeError: Object #<Object> has no method 'show'。并且日期未显示为选中。这有什么问题？

【解决方案2】：

我不会使用这个解决方案，因为它几乎在每个浏览器中都会产生错误。：

$(function() {
    $('#datepicker').datepicker({
       onSelect: function(dateText, inst) { inst.show() }
    });
});

你能做的最好的事情就是覆盖 jQuery ui datepicker 的 '_selectDate' 方法。

您可以像这样再次将此函数添加到日期选择器中：

$('#dateField').datepicker({

    changeMonth: true,
    changeYear: true,

},

$.datepicker._selectDate = function(id, dateStr){
    var onSelect,
    target = $(id),
    inst = this._getInst(target[0]);

    dateStr = (dateStr != null ? dateStr : this._formatDate(inst));
    if (inst.input) {
       inst.input.val(dateStr);
    }
    this._updateAlternate(inst);

    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 {

        this._lastInput = inst.input[0];
            if (typeof(inst.input[0]) !== "object") {
            inst.input.focus(); // restore focus
        }
        this._lastInput = null;
    }

})

);

通常会有一个 'this._hideDatepicker();'在这个脚本中。我把它留了下来。您也可以更改 jQuery 文件本身，但我不喜欢这样做，因为更新 jQuery 后您将失去功能。

使用我的解决方案就不需要这样做了。

【讨论】：

您如何使用它并让 datepicker 仍然将 'ui-state-active' 类应用于当前选定的日期？

【解决方案3】：

创建日期选择器时使用以下选项：

$('input').datepicker({
   onClose: function(d,i){setTimeout(function(){$('input').datepicker("show");},1)}
});

当然，你必须自己处理真正的关闭。

var realClose = false;
$('input').datepicker({
   onClose: function(d,i){if(realClose)setTimeout(function(){$('input').datepicker("show"); realClose = false},1)}
});
$("#done").click(function(){realClose=true;$('input').datepicker("hide")})

【讨论】：

这不是意味着日期选择器永远无法关闭吗？无论用户是否想关闭它，它都会再次显示。

【解决方案4】：

我一直在寻找相同的解决方案。 I wanted a OK and Cancel button and when a date is selected, that the input field is not updated unless you click on OK.

您需要调整以下内容：

将 stayOpen: true 添加到 this._defaults = { 全局默认值。
in _selectDate: function(id, dateStr) { 你需要调整：
```
if (inst.input)
    inst.input.val(dateStr);
```

到

    var stayOpen = this._get(inst, 'stayOpen');
    if (!stayOpen && inst.input)
        inst.input.val(dateStr);

因为这会在您选择日期时更新输入字段的值。如果您只想在单击确定时更改日期，则需要设置 stayOpen: true ，否则当您选择新日期时日期选择器将关闭。所以这就是为什么我们还要得到stayOpen，如果这是真的，它会在关闭之前更新输入字段。

你也可以在 else 中使用这个参数来不隐藏日期选择器：

else if (!stayOpen) {
    this._hideDatepicker();

我使用关闭按钮作为 OK 按钮，所以在 _generateHTML: function(inst) { 您需要将该按钮的 data-handler="hide" 调整为其他内容，例如 data-handler="ok"。

在 _attachHandlers: function(inst) { 你可以在末尾添加一个新的处理程序：

,
ok: function () {
    window['DP_jQuery_' + dpuuid].datepicker._updateInput(id, inst);
}

然后您可以像这样添加一个新函数来更新输入字段并隐藏日期选择器：

_updateInput: function(id, inst) {
    if (inst.input) {
        inst.input.val(this._formatDate(inst));
    }
    this._hideDatepicker(); 
},

【讨论】：