回答:
日付ピッカーのonSelect
イベントを使用できます。
$(".date").datepicker({
onSelect: function(dateText) {
console.log("Selected date: " + dateText + "; input's current value: " + this.value);
}
});
ライブの例:
残念ながら、onSelect
日付が変更されていなくても、日付が選択されるたびに発生します。これは、日付ピッカーの設計上の欠陥です。これは常にonSelect
(何も変更されていなくても)起動し、変更時に基になる入力でイベントを起動しません。(その例のコードを見ると、変更をリッスンしていますが、発生していません。)何かが変更されると、入力でイベントを発生させるはずです(通常のchange
イベント、またはおそらく日付ピッカー)。特定のもの)。
もちろん、必要にchange
応じて、イベントをinput
炎上させることができます。
$(".date").datepicker({
onSelect: function() {
$(this).change();
}
});
これはchange
、input
jQueryを介して接続されたすべてのハンドラーの基になる部分で起動します。しかし、再び、それは常にそれを起動します。実際の変更でのみ発火したい場合は、以前の値を(おそらくを介してdata
)保存して比較する必要があります。
ライブの例:
change
ハンドラーをトリガーできます」と思ったので、それで回答を更新しました。:-)
TJ Crowderの回答(https://stackoverflow.com/a/6471992/481154)は非常に優れており、依然として正確です。onSelect関数内でのchangeイベントのトリガーは、取得するのと同じくらい簡単です。
ただし、datepickerオブジェクト(lastVal
)には、自分で値を保存する必要なく、実際の変更時にのみ変更イベントを条件付きでトリガーできる、優れたプロパティがあります。
$('#dateInput').datepicker({
onSelect: function(d,i){
if(d !== i.lastVal){
$(this).change();
}
}
});
次に、通常のように変更イベントを処理します。
$('#dateInput').change(function(){
//Change code!
});
lastVal
は;-)
lastVal
少なくとも私のテストでは、datepickerオブジェクトには存在しません。したがって、このソリューションは常に変更をトリガーします。
これは、日付が変更された場合にのみイベントをトリガーするソリューションが必要だったために作成しました。
それは簡単な解決策です。ダイアログボックスが閉じるたびに、データが変更されたかどうかをテストします。含まれている場合は、カスタムイベントをトリガーして、格納されている値をリセットします。
$('.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
});
$('#inputfield').change(function() {
dosomething();
});
私はbootstrap-datepickerを使用していますが、上記の解決策はどれもうまくいきませんでした。この答えは私を助けました...
日付を手動で編集したり日付をクリアしたりすると、ブートストラップの日付ピッカー変更日付イベントが発生しません
これが私が適用したものです:
$('.date-picker').datepicker({
endDate: new Date(),
autoclose: true,
}).on('changeDate', function(ev){
//my work here
});
これが他の人の役に立つことを願っています。
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を正しく起動できませんでした。だから私はバニラjsを介して変更イベントを発生させるために次のアプローチをしました。
$('.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);
}
}
});
私の解決策:
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
});
私の解決策は:
events: {
'apply.daterangepicker #selector': 'function'
}
あなたが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());
}
});
リターンのイベントは私のために働く
この助けを願っています
あなたの問題は、日付ピッカーの設定方法にあると思います。入力を切断しないでください... altFieldを使用しないでください。代わりに、onSelectが発生したときに値を明示的に設定します。これにより、各対話を制御できます。ユーザーテキストフィールドと日付ピッカー。
注:onSelectは予期しないさまざまな対話で呼び出される可能性があるため、.change()ではなく.change()でルーチンを呼び出す必要がある場合があります。
疑似コード:
$('#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
});
});