私はあなたがフィールドを変更するとそれが検索ルーチンを呼び出すJSコードを持っています。問題は、Datepickerが入力フィールドを更新したときに発生するjQueryイベントが見つからないことです。
何らかの理由で、Datepickerがフィールドを更新するときにchangeイベントが呼び出されません。カレンダーがポップアップするとフォーカスが変わり、それを使うこともできません。何か案は?
日付ピッカーの onSelect
event を使用できます。
$(".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="http://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<input type='text' class='date'>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
残念ながら、onSelect
は、日付が変更されていなくても、日付が選択されるたびに起動します。これは、datepickerの設計上の欠陥です:常にonSelect
を起動し(何も変更されていなくても)、does n't変更時に基になる入力でイベントを起動しません。 (その例のコードを見ると、変更をリッスンしていますが、変更は発生していません。)物事が変更されたときに入力でイベントを発生させる必要があります(通常のchange
イベント、またはおそらくdatepicker -特定のもの)。
必要に応じて、もちろん、change
イベントでinput
イベントを作成できます。
$(".date").datepicker({
onSelect: function() {
$(this).change();
}
});
これにより、jQueryを介して接続されたすべてのハンドラーの基になるchange
でinput
が起動します。しかし、再び、alwaysはそれを起動します。実際の変更でのみ起動する場合は、以前の値を保存し(おそらく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="http://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<input type='text' class='date'>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
T.J. Crowderの回答( https://stackoverflow.com/a/6471992/481154 )は非常に優れており、依然として正確なままです。 onSelect関数内でchangeイベントを発生させるのは、あなたが得ることと同じくらい近いです。
しかし、datepickerオブジェクト(lastVal
)には、自分で値を保存しなくても条件付きで変更イベントを実際の変更時にのみ発生させる _を可能にするNiceプロパティがあります。
$('#dateInput').datepicker({
onSelect: function(d,i){
if(d !== i.lastVal){
$(this).change();
}
}
});
それから、通常のように変更イベントを処理します。
$('#dateInput').change(function(){
//Change code!
});
Datepickerオブジェクトで onSelect イベントを探しています。
$('.selector').datepicker({
onSelect: function(dateText, inst) { ... }
});
日付が変更された場合にのみイベントをトリガーするための解決策が必要だったので、これを書きました。
それは簡単な解決策です。ダイアログボックスを閉じるたびに、データが変更されたかどうかを確認します。もしあれば、カスタムイベントを発生させ、保存されている値をリセットします。
$('.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で発生させることができませんでした。だから私は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); } } });
これを試して
$('#dateInput').datepicker({
onSelect: function(){
$(this).trigger('change');
}
}});
お役に立てれば:)
試してください:
$('#idPicker').on('changeDate', function() {
var date = $('#idPicker').datepicker('getFormattedDate');
});
私の解決策は:
events: { 'apply.daterangepicker #selector': 'function' }
マニュアルは言う:
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!');
});
私のために働きます。
あなたが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イベントが私のために働く
この助けを願って
私の正解:
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
});
以下の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);
});