ปัญหาเหตุการณ์การเปลี่ยน jQuery Datepicker onchange

ฉันมีรหัส JS ซึ่งเมื่อคุณเปลี่ยนฟิลด์มันจะเรียกรูทีนการค้นหา ปัญหาคือฉันไม่พบเหตุการณ์ jQuery ใด ๆ ที่จะทำงานเมื่อ Datepicker อัพเดตฟิลด์อินพุต

ด้วยเหตุผลบางอย่างเหตุการณ์การเปลี่ยนแปลงจะไม่ถูกเรียกเมื่อ Datepicker อัปเดตฟิลด์ เมื่อปฏิทินปรากฏขึ้นมันจะเปลี่ยนโฟกัสดังนั้นฉันจึงไม่สามารถใช้สิ่งนั้นได้ ความคิดใด ๆ

คุณสามารถใช้ 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="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(แม้ว่าจะไม่มีอะไรเปลี่ยนแปลง) และจะไม่ส่งเหตุการณ์ใด ๆ ในอินพุตพื้นฐานเมื่อมีการเปลี่ยนแปลง (ถ้าคุณดูในรหัสของตัวอย่างนั้นเรากำลังฟังการเปลี่ยนแปลง แต่มันไม่ได้ถูกยกขึ้น) มันน่าจะเป็นเหตุการณ์ในอินพุตเมื่อสิ่งต่าง ๆ เปลี่ยนแปลง (อาจเป็นchangeเหตุการณ์ปกติหรืออาจเป็น datepicker- หนึ่ง)

แน่นอนถ้าคุณชอบคุณสามารถสร้างchangeเหตุการณ์บนinputกองไฟ:

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

ที่จะยิงchangeบนพื้นฐานinputสำหรับการจัดการใด ๆ ติดยาเสพติดผ่านทาง jQuery แต่อีกครั้งมันจะยิงมันเสมอ หากคุณต้องการเริ่มการเปลี่ยนแปลงที่แท้จริงเท่านั้นคุณจะต้องบันทึกค่าก่อนหน้า (อาจเป็นผ่าน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>

คำตอบของ TJ Crowder ( 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!
});

คุณกำลังมองหาเหตุการณ์onSelectในวัตถุ datepicker:

$('.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 และไม่มีวิธีแก้ปัญหาใดที่ใช้ได้สำหรับฉัน คำตอบนี้ช่วยฉัน ..

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 () เหตุการณ์เพื่อเริ่มต้นอย่างถูกต้องบนเลือก ดังนั้นฉันจึงไปด้วยวิธีการต่อไปนี้เพื่อยิงเหตุการณ์การเปลี่ยนแปลงผ่านทางวานิลลา 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);
         }
     }
});

ลองสิ่งนี้

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

หวังว่าจะช่วย :)

ลอง :

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

คู่มือพูดว่า:

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

ได้ผลสำหรับฉัน

ความเงียบของฉัน:

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'
}

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

เหตุการณ์ในการกลับมาใช้งานได้สำหรับฉัน

หวังว่าความช่วยเหลือนี้

ฉันคิดว่าปัญหาของคุณอาจอยู่ที่การตั้งค่า datepicker ของคุณ ทำไมคุณไม่ยกเลิกการเชื่อมต่ออินพุต ... อย่าใช้ altField แทนที่จะตั้งค่าอย่างชัดเจนเมื่อ onSelect fires สิ่งนี้จะทำให้คุณสามารถควบคุมแต่ละการโต้ตอบ ฟิลด์ข้อความผู้ใช้และ datepicker

หมายเหตุ: บางครั้งคุณต้องเรียกรูทีนบน. 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
    });
});