jQuery Datepicker onchange olay sorunu

Bir alanı değiştirdiğinizde bir arama rutini çağıran bir JS kodu var. Sorun Datepicker giriş alanını güncelleştirdiğinde tetiklenecek herhangi bir jQuery olayları bulamıyor olmasıdır.

Nedense, Datepicker alanı güncellediğinde bir change olayı çağrılmaz. Takvim açıldığında odağı değiştirir, böylece onu da kullanamam. Herhangi bir fikir?

Datepicker onSelectolayını kullanabilirsiniz .

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

Canlı örnek :

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

Maalesef, onSelectbir tarih seçildiğinde, değişmemiş olsa bile tetiklenir. Her zaman yangınlar: Bu datepicker bir tasarım kusur onSelect(hiçbir şey değişti bile) ve gelmez değişikliği yatan girişinde herhangi olayı. (Bu örneğin koduna bakarsanız, değişiklikleri dinliyoruz, ancak bunlar yükseltilmiyor.) İşler değiştiğinde büyük olasılıkla girdi üzerinde bir olay changebaşlatmalıdır (muhtemelen olağan olay veya muhtemelen bir tarih seçici- belirli bir).

İsterseniz, elbette, changeetkinliği inputateşte yapabilirsiniz:

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

Bu jQuery ile bağlanmış herhangi bir işleyici changeiçin altta ateş edecek input. Ama yine de, her zaman ateş ediyor. Yalnızca gerçek bir değişikliğe ateş etmek istiyorsanız, önceki değeri (muhtemelen üzerinden data) kaydetmeniz ve karşılaştırmanız gerekir.

Canlı örnek :

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

TJ Crowder'ın yanıtı ( https://stackoverflow.com/a/6471992/481154 ) çok iyi ve hala doğru. OnSelect işlevi içindeki change olayını tetiklemek, alacağınız kadar yakındır.

Ancak, datepicker nesnesinde ( lastVal) , değerleri kendiniz depolamak zorunda kalmadan değişiklik olayını yalnızca gerçek değişikliklerde koşullu olarak tetiklemenizi sağlayacak güzel bir özellik vardır :

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

Sonra normal gibi değişiklik olaylarını yönetin:

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

Datepicker nesnesinde onSelect olayını arıyorsunuz :

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

Bunu yazdım çünkü bir olayı ancak tarih değiştiğinde tetiklemek için bir çözüme ihtiyacım vardı.

Basit bir çözümdür. İletişim kutusu her kapatıldığında verilerin değişip değişmediğini test ederiz. Varsa, özel bir etkinliği tetikleriz ve depolanan değeri sıfırlarız.

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

Şimdi bu özel etkinlik için işleyicileri bağlayabiliriz ...

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

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

Bootstrap-datepicker kullanıyorum ve yukarıdaki çözümlerin hiçbiri benim için çalışmadı. Bu cevap bana yardımcı oldu ..

Tarihleri ​​manuel olarak düzenlerken veya tarihi temizlerken bootstrap tarih seçici tarih değiştir olayı etkinleşmiyor

İşte ben uyguladım:

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

Umarım bu başkalarına yardımcı olabilir.

JQueryUi 1.9'da, ek bir veri değeri ve beforeShow ve onSelect işlevlerinin bir kombinasyonu ile çalışmasını sağladım:

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

Benim için çalışıyor :)

Bunun eski bir soru olduğunu biliyorum. Ama doğru ateş etmek jquery $ (this) .change () olay alamadım. Bu yüzden vanilya js aracılığıyla değişim olayını ateşlemek için aşağıdaki yaklaşımla gittim.

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

Bunu dene

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

Bu yardımcı olur umarım:)

Deneyin :

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

Kılavuz diyor:

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

Yani:

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

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

Benim için çalışıyor.

Soluthion'um:

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

Benim çözümüm:

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

DatePicker tarafından seçilen değer değişikliği olay kodu aşağıda

/* 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 kullanıyorsanız bu size yardımcı olacaktır

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

Geri dönüş etkinliği benim için çalışıyor

umarım bu yardım

Bence senin sorunun tarih seçicinin kurulumunda yatıyor olabilir. Giriş bağlantısını neden kesmiyorsunuz ... altField kullanmayın. Bunun yerine, onSelect tetiklendiğinde değerleri açıkça ayarlayın. Bu size her etkileşimin kontrolünü verecektir; kullanıcı metin alanı ve tarih seçici.

Not: Bazen .onSelect () yerine .change () yerine rutini çağırmanız gerekir, çünkü onSelect beklemediğiniz farklı etkileşimlerde çağrılabilir.

Sahte Kod:

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