jQuery Datepicker mengubah acara acara

Saya memiliki kode JS di mana ketika Anda mengubah bidang itu memanggil rutin pencarian. Masalahnya adalah bahwa saya tidak dapat menemukan peristiwa jQuery yang akan diaktifkan ketika Datepicker memperbarui bidang input.

Untuk beberapa alasan, acara perubahan tidak dipanggil saat Datepicker memperbarui bidang. Ketika kalender muncul itu mengubah fokus jadi saya tidak bisa menggunakannya juga. Ada ide?

Anda dapat menggunakan datepicker ini onSelectacara .

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

Contoh langsung :

$(".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>

Sayangnya, onSelectmenyala kapan saja suatu tanggal dipilih, bahkan jika itu tidak berubah. Ini adalah cacat desain di datepicker: Selalu menyala onSelect(bahkan jika tidak ada yang berubah), dan tidak memecat setiap peristiwa pada input yang mendasari perubahan. (Jika Anda melihat dalam kode contoh itu, kami mendengarkan perubahan, tetapi mereka tidak dimunculkan.) Mungkin harus memunculkan suatu peristiwa pada input ketika hal-hal berubah (mungkin changeacara biasa , atau mungkin sebuah data-klik- spesifik).

Jika Anda suka, tentu saja, Anda dapat membuat changeacara di atas inputapi:

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

Itu akan menembak changepada yang mendasari inputuntuk setiap pawang yang terhubung melalui jQuery. Tapi sekali lagi, selalu memecatnya. Jika Anda hanya ingin melakukan perubahan nyata, Anda harus menyimpan nilai sebelumnya (mungkin melalui data) dan membandingkan.

Contoh langsung :

$(".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>

Jawaban TJ Crowder ( https://stackoverflow.com/a/6471992/481154 ) sangat bagus dan masih tetap akurat. Memicu perubahan acara dalam fungsi onSelect sedekat yang akan Anda dapatkan.

Namun, ada properti bagus di objek datepicker ( lastVal) yang akan memungkinkan Anda untuk memicu peristiwa perubahan hanya pada perubahan aktual tanpa harus menyimpan nilai sendiri:

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

Maka hanya menangani perubahan acara seperti biasa:

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

Anda mencari acara onSelect di objek datepicker:

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

Saya menulis ini karena saya membutuhkan solusi untuk memicu suatu peristiwa hanya jika tanggalnya berubah.

Ini adalah solusi sederhana. Setiap kali kotak dialog ditutup, kami menguji untuk melihat apakah data telah berubah. Jika sudah, kami memicu acara khusus dan mereset nilai yang disimpan.

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

Sekarang kita dapat menghubungkan penangan untuk acara khusus itu ...

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

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

Saya menggunakan bootstrap-datepicker dan tidak ada solusi di atas yang berfungsi untuk saya. Jawaban ini membantu saya ..

bootstrap datepicker tanggal perubahan acara tidak menyala ketika secara manual mengedit tanggal atau tanggal kliring

Inilah yang saya terapkan:

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

Semoga ini bisa membantu orang lain.

Pada jQueryUi 1.9 Saya berhasil membuatnya berfungsi melalui nilai data tambahan dan kombinasi fungsi beforeShow dan 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 );
        }
    }
});

Bekerja untuk saya :)

Saya tahu ini adalah pertanyaan lama. Tapi saya tidak bisa mendapatkan jquery $ (ini) .change () acara untuk mem-api dengan benar di Pilih. Jadi saya pergi dengan pendekatan berikut untuk memecat acara perubahan melalui vanilla 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);
         }
     }
});

Coba ini

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

Semoga ini membantu:)

Coba:

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

Manual mengatakan:

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

Begitu:

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

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

Bekerja untukku.

Keutuhan saya:

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
});

Solusi saya adalah:

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

DatePicker memilih nilai mengubah kode acara di bawah ini

/* 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);        
            });

jika Anda menggunakan wdcalendar, ini akan membantu Anda

 $("#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());
        }
      }); 

acara diReturn bekerja untuk saya

semoga ini membantu

Saya pikir masalah Anda mungkin terletak pada bagaimana pengaturan data Anda. Mengapa Anda tidak memutuskan input ... jangan gunakan altField. Alih-alih secara eksplisit mengatur nilai-nilai ketika onSelect menyala. Ini akan memberi Anda kendali atas setiap interaksi; bidang teks pengguna, dan datepicker.

Catatan: Terkadang Anda harus memanggil rutin pada .change () dan bukan .onSelect () karena onSelect dapat dipanggil pada interaksi berbeda yang tidak Anda harapkan.

Kode semu:

$('#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
    });
});