[英]jQuery Datepicker: Prevent closing picker when clicking a date
嗨伙伴stackoverflow:ers,
我正在使用jQuery Datepicker插件 ,以及Martin Milesich Timepicker插件。 一切都很好,除了点击日期选择器中的日期,关闭窗口小部件,没有时间选择时间。
问:所以我想知道是否有办法阻止小部件在点击日期时关闭,而是强迫用户点击“完成”按钮(在启用“showButtonPanel:true”选项时显示)或点击小部件之外。 我不希望我的用户必须打开小部件两次! 在timepicker演示中查看在线行为
任何帮助解决这个问题,甚至指向正确方向,都表示赞赏!
更多信息:我正在使用Martins提供的文件下载链接: http : //milesich.com/tpdemo/timepicker-0.2.0.zip
这些是我正在使用的选项:
$(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
});
})
供参考,因为人们通过邮件问我这个问题。 这是一个需要添加到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: function() {
$(this).data('datepicker').inline = true;
},
onClose: function() {
$(this).data('datepicker').inline = false;
}
你必须自己破解日期选择器。 这是它使用的代码。 如果它不是内联的,它将在您选择日期时隐藏。
您可以传入自己的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的内联日历:)
<input type="text" id="alternate" size="30" />
<div id="datepicker"></div>
<script>
$("#datepicker").datepicker({
altField: "#alternate"
});
</script>
检查这个小提琴: http : //jsfiddle.net/menocomp/y2s662b0/1/
这是一个肮脏的解决方法...但它适用于我...即使使用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版本完成的。
很酷,如果你使用的是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);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.