19

嗨，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
     });
})
4

9 回答 9

28

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

onSelect: function() {
    $(this).data('datepicker').inline = true;                               
},
onClose: function() {
    $(this).data('datepicker').inline = false;
}
于 2012-06-14T21:03:34.657 回答
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);
}

祝你好运，让它在你的网站上运行！

于 2009-11-19T10:39:12.523 回答
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;
}
于 2009-08-10T00:01:07.447 回答
4

这是一个解决方案：

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

`

于 2014-01-24T12:39:52.900 回答
3

为什么所有评论都提供了解决方法？它是直言：

使用带有 altField 的内联日历 :)

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

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

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

于 2015-02-24T19:28:48.737 回答
0

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

首先，我在小部件的默认字典中添加了另一个属性：

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 版本上完成的。

于 2010-09-29T21:20:57.813 回答
0

酷，如果你使用 jquery-ui-1.8.5.custom.min.js 和 jquery-ui.multidatepicker.js，你可以修改 jquery-ui-1.8.5.custom.min.js: 从：

if(a.inline)this._updateDatepicker(a);

进入：

if(a.inline || !this._get(a, 'closeOnSelect'))this._updateDatepicker(a);
于 2010-10-13T06:53:52.583 回答
0

好吧，这是一个肮脏的解决方法……但它对我有用……即使使用showButtonPanel: true

  $(function() {
    var dp_c = null, dp_once = false;
    $( '#datepicker' ).datepicker({
      showButtonPanel: true,
      onSelect: function() {
        $(this).data('datepicker').inline = true;  
        setTimeout(function () {
          $('#ui-datepicker-div').find('.ui-datepicker-buttonpane').append(dp_c);
        }, 1);

      },
      onClose: function() {
        $(this).data('datepicker').inline = false;
      }
    }).click(function () {
      if(!dp_once) {
        setTimeout(function () {
          dp_c = $('#ui-datepicker-div').find('.ui-datepicker-close').clone();
        }, 500);
        dp_once = !!1;
      }
    });

    $('#ui-datepicker-div').on('click', '.ui-datepicker-close', function () {
      $('#datepicker').datepicker( "hide" );
    });

  });
于 2013-06-11T07:54:42.187 回答
0

您应该覆盖本机 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);
于 2013-12-20T11:55:41.943 回答