jQuery 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 }); }) 而不是更改源，最好使用现有的事件
onSelect: function() { $(this).data('datepicker').inline = true; }, onClose: function() { $(this).data('datepicker').inline = false; }
供参考，因为人们通过邮件问我这个问题。 这是一个需要添加到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); }
祝你在自己的网站上运行好运！
你必须自己破解日期选择器。 这是它使用的代码。 如果它不是内联的，它将在您选择日期时隐藏。
您可以传入自己的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; }
这是一个解决方案：
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的内联日历:)
检查这个小提琴： http ： //jsfiddle.net/menocomp/y2s662b0/1/
很酷，如果你使用的是jquery-ui-1.8.5.custom.min.js和jquery-ui.multidatespicker.js，你可以修改jquery-ui-1.8.5.custom.min.js：from：
if(a.inline)this._updateDatepicker(a);
成：
if(a.inline || !this._get(a, 'closeOnSelect'))this._updateDatepicker(a);
这是一个肮脏的解决方法…但它适用于我…即使使用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" ); }); });
你应该覆盖原生的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);
根据Emil的建议，我发现了一种更好，更简单的方法来修改窗口小部件，以支持select事件中不关闭的窗口小部件。
首先，我在小部件的默认值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版本完成的。