jQuery Datepicker:单击日期时阻止关闭选择器

Emi*_*röm 19 javascript jquery jquery-ui jquery-ui-datepicker

嗨伙伴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
     });
})
Run Code Online (Sandbox Code Playgroud)

Emi*_*röm 28

供参考,因为人们通过邮件问我这个问题.这是一个需要添加到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);
}
Run Code Online (Sandbox Code Playgroud)

祝你在自己的网站上工作好运!


小智 26

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

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


red*_*are 8

你必须自己破解日期选择器.这是它使用的代码.如果它不是内联的,它将在您选择日期时隐藏.

您可以传入自己的onSelect方法并快速将datePicker实例更改为内联,然后将其更改回来而无需更改datepicker内部,但这是一个非常hacky的解决方案.

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;
}
Run Code Online (Sandbox Code Playgroud)