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

IT技术 javascript jquery jquery-ui jquery-ui-datepicker
2021-03-08 11:06:00

嗨，stackoverflow:ers，

我正在使用jQuery Datepicker插件以及Martin Milesich Timepicker插件。一切都很好，除了在日期选择器中单击日期会关闭小部件，没有时间选择时间。

问题：所以我想知道是否有办法防止小部件在单击日期时关闭，而是强制用户单击“完成”按钮（启用“showButtonPanel：true”选项时显示），或单击在小部件之外。我不希望我的用户不得不两次打开小部件！在 timepicker 演示中查看在线行为

任何解决此问题的帮助，甚至是正确方向的指针，都表示赞赏！

更多信息：我正在使用 Martins 下载链接提供的文件：http : //milesich.com/tpdemo/timepicker-0.2.0.zip

  • 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
     });
})
6个回答

最好使用现有事件，而不是更改源

onSelect: function() {
    $(this).data('datepicker').inline = true;                               
},
onClose: function() {
    $(this).data('datepicker').inline = false;
}
非常感谢你。这是完美的解决方案。
2021-05-03 11:06:00
@PhilMoorhouse 有点晚了，但也许仍然可以帮助某人：在 jquery-ui 中，您会找到一个_generateHTML函数，如果实例已inline: true设置，则该函数不会添加“完成”按钮。您可以搜索ui-datepicker-close那里的唯一出现并摆脱这种行为。
2021-05-03 11:06:00
当您使用 js 进行一些自定义样式时，此解决方案并不好，因为它会重新初始化 datepicker 弹出窗口。$(this).data('datepicker').inline = true; 之后所有的变化都消失了。
2021-05-19 11:06:00
这是一个更好的解决方案。注意：如果您已showButtonPanel: true启用，这将删除“完成”按钮。还没有想出如何阻止这种行为。
2021-05-20 11:06:00
@Min Hur：这有点好用，但如果日期选择器上有一个按钮，那么如果使用此代码，它将不会保持可见。请您告诉我如何在选择日期时防止关闭日期选择器并防止其上的按钮。
2021-05-20 11:06:00

供参考，因为人们通过邮件问过我这个问题。这是需要添加到 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);
}

祝它在您的网站上工作好运！

+1 一个老问题，但仍然有效！感谢您添加此参考。
2021-04-20 11:06:00
这有效，但在选择日期时滚动到屏幕顶部......至少在 Chrome 中是这样。
2021-04-22 11:06:00
@zaf：感谢您回复我并投票:)
2021-05-03 11:06:00
给我这个错误：Uncaught RangeError: Maximum call stack size exceeded
2021-05-08 11:06:00
@OmidHezaveh：您可能没有正确复制内容。请注意名称 _selectDateOverload 和 _selectDate。他们需要与众不同。
2021-05-10 11:06:00

您将不得不自己破解日期选择器。这是它使用的代码。如果它不是内联的，它会在您选择日期时隐藏。

您可以传入自己的 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;
}
不，我的错。以上抛出了一个错误，似乎阻止了选择器隐藏。我仍然无法让您的建议起作用。如果我把它变成“内联”，完成按钮就会消失，除了点击它之外，没有其他方法可以关闭窗口。我尝试设置超时并将内联模式重置为无效。
2021-04-22 11:06:00
好的，我找到了第二种方法来做我想做的事。实际上可以使用自定义方法覆盖 _selectDate 方法，您在上面提供的代码来自哪里。该方法包含与原始文件中完全相同的代码，但没有“_hideDatepicker”行。简单，而且相当hackish，但它有效。
2021-05-11 11:06:00
很高兴你对它进行了排序，埃米尔。祝你好运
2021-05-17 11:06:00
非常感谢 redsquare，您的回复使我朝着正确的方向前进。似乎 onSelect 仅在选择日期时触发，因此只需在 select 上的实例上调用 show() 即可获得我想要的行为。... onSelect: function(dateText, inst){ inst.show(); }
2021-05-19 11:06:00

这是一个解决方案：

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;
}

`

为什么所有评论都提供解决方法？这是直言不讳：

将内联日历与 altField 一起使用 :)

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

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

检查这个小提琴：http : //jsfiddle.net/menocomp/y2s662b0/1/

其它你可能感兴趣的问题
上一篇在 android 浏览器中播放 html5 音频 下一篇带参数的Javascript回调函数