jQuery UI Datepicker onchange事件问题

你可以使用datepicker的onSelect事件。

$(".date").datepicker({
onSelect: function(dateText) {
console.log("Selected date: " + dateText + "; input's current value: " + this.value);
}
});

生活的例子:

$(".date")
.datepicker({
onSelect: function(dateText) {
console.log("Selected date: " + dateText + "; input's current value: " + this.value);
}
})
.on("change", function() {
console.log("Got change event from field");
});

<link href="https://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<input type='text' class='date'>
<script src="https://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

不幸的是，只要选择了日期，onSelect就会触发，即使它没有改变。这是datepicker的一个设计缺陷:它总是触发onSelect(即使没有任何更改)，而不在更改时触发底层输入的任何事件。(如果你看一下这个例子的代码，我们正在监听变化，但是它们并没有被引发。)当事情发生变化时，它可能会在输入上触发一个事件(可能是通常的change事件，也可能是特定于datepicker的事件)。

当然，如果你愿意，你可以在input上触发change事件:

$(".date").datepicker({
onSelect: function() {
$(this).change();
}
});

这将为通过jQuery连接的任何处理程序在底层的__abc1上触发change。但是同样，它总是会触发它。如果你只想在真正的变化时触发，你必须保存之前的值(可能通过data)并进行比较。

生活的例子:

$(".date")
.datepicker({
onSelect: function(dateText) {
console.log("Selected date: " + dateText + "; input's current value: " + this.value);
$(this).change();
}
})
.on("change", function() {
console.log("Got change event from field");
});

<link href="https://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<input type='text' class='date'>
<script src="https://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

你在datepicker对象中寻找onSelect事件:

$('.selector').datepicker({
onSelect: function(dateText, inst) { ... }
});

$('#inputfield').change(function() {
dosomething();
});

我写这篇文章是因为我需要一个解决方案来仅在日期改变时触发事件。

这是一个简单的解决办法。每次对话框关闭时，我们都会测试数据是否发生了变化。如果存在，则触发自定义事件并重置存储的值。

$('.datetime').datepicker({
onClose: function(dateText,datePickerInstance) {
var oldValue = $(this).data('oldValue') || "";
if (dateText !== oldValue) {
$(this).data('oldValue',dateText);
$(this).trigger('dateupdated');
}
}
});

现在我们可以为那个自定义事件连接处理程序了……

$('body').on('dateupdated','.datetime', function(e) {
// do something
});

T.J.克劳德的答案(https://stackoverflow.com/a/6471992/481154)是非常好的，仍然是准确的。在onSelect函数中触发更改事件是最接近的方法。

然而，datepicker对象(lastVal)上有一个很好的属性，允许你只有在实际更改时才有条件地触发更改事件而不必自己存储值:

$('#dateInput').datepicker({
onSelect: function(d,i){
if(d !== i.lastVal){
$(this).change();
}
}
});

然后像往常一样处理更改事件:

$('#dateInput').change(function(){
//Change code!
});

DatePicker选择的值更改事件代码如下

/* HTML Part */
<p>Date: <input type="text" id="datepicker"></p>


/* jQuery Part */
$("#datepicker").change(function() {
selectedDate= $('#datepicker').datepicker({ dateFormat: 'yy-mm-dd' }).val();
alert(selectedDate);
});

如果你正在使用wdcalendar，这将帮助你

 $("#PatientBirthday").datepicker({
picker: "<button class='calpick'></button>",
onReturn:function(d){
var today = new Date();
var birthDate = d;
var age = today.getFullYear() - birthDate.getFullYear();
var m = today.getMonth() - birthDate.getMonth();
if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
age--;
}


$('#ageshow')[0].innerHTML="Age: "+age;
$("#PatientBirthday").val((d.getMonth() + 1) + '/' + d.getDate() + '/' +  d.getFullYear());
}
});

事件onReturn为我工作

希望这对你有所帮助

试试这个

$('#dateInput').datepicker({
onSelect: function(){
$(this).trigger('change');
}
}});

希望这对你有所帮助。

在jQueryUi 1.9上，我已经设法让它通过一个额外的数据值和beforeShow和onSelect函数的组合来工作:

$( ".datepicker" ).datepicker({
beforeShow: function( el ){
// set the current value before showing the widget
$(this).data('previous', $(el).val() );
},


onSelect: function( newText ){
// compare the new value to the previous one
if( $(this).data('previous') != newText ){
// do whatever has to be done, e.g. log it to console
console.log( 'changed to: ' + newText );
}
}
});

对我有用:)

我知道这是一个老问题。但是我不能得到jquery $(this).change()事件正确地点燃onSelect。所以我用下面的方法通过vanilla js来触发change事件。

$('.date').datepicker({
showOn: 'focus',
dateFormat: 'mm-dd-yy',
changeMonth: true,
changeYear: true,
onSelect: function() {
var event;
if(typeof window.Event == "function"){
event = new Event('change');
this.dispatchEvent(event);
}   else {
event = document.createEvent('HTMLEvents');
event.initEvent('change', false, false);
this.dispatchEvent(event);
}
}
});

我正在使用bootstrap-datepicker，上面的解决方案都不适合我。这个回答帮助了我。

bootstrap datepicker更改日期事件不触发手动编辑日期或清除日期

这是我申请的:

 $('.date-picker').datepicker({
endDate: new Date(),
autoclose: true,
}).on('changeDate', function(ev){
//my work here
});

希望这能帮助到其他人。

手册说:

apply.daterangepicker: Triggered when the apply button is clicked, or when a predefined range is clicked

所以:

$('#daterange').daterangepicker({
locale: { cancelLabel: 'Clear' }
});


$('#daterange').on('apply.daterangepicker', function() {
alert('worked!');
});

对我有用。

我的解决方案是:

events: {
'apply.daterangepicker #selector': 'function'
}

试一试:

$('#idPicker').on('changeDate', function() {
var date = $('#idPicker').datepicker('getFormattedDate');
});

我的soluthion:

var $dateInput = $('#dateInput');


$dateInput.datepicker({
onSelect: function(f,d,i){
if(d !== i.lastVal){
$dateInput.trigger("change");
}
}
}).data('datepicker');


$dateInput.on("change", function () {
//your code
});

注意:有时你必须在.change()而不是.onSelect()上调用例程，因为onSelect可以在你不期望的不同交互上调用。

伪代码:

$('#date').datepicker({
//altField: , //do not use
onSelect: function(date){
$('#date').val(date); //Set my textbox value
//Do your search routine
},
}).change(function(){
//Or do it here...
});


$('#date').change(function(){
var thisDate = $(this).val();
if(isValidDate(thisDate)){
$('#date').datepicker('setDate', thisDate); //Set my datepicker value
//Do your search routine
});
});

这种方法很简单，每次都适用于文本框控件。$('#controlID').on('changeDate', function() { $(this).change(); });

你们中的一些人可能会使用XDSoft DateTimePicker https://xdsoft.net/jqplugins/datetimepicker/

这就是改变事件

onSelectDate: function(){
alert('change date event);
}

https://xdsoft.net/jqplugins/datetimepicker/#onSelectDate

您可以使用datepicker的onClose选项，并将更改代码放在其中。当datepicker模式关闭时触发。我试图触发变化事件，但这不会工作，所以我把我的代码内的onClose代替，它工作。同样的方法也适用于onSelect，如果你需要在选择日期时触发。

$('#el').datepicker({
onClose: function () {
// code here
}
});

Datepicker选项https://api.jqueryui.com/datepicker/