Vấn đề về sự kiện trao đổi ngày của jQuery

Tôi có một mã JS trong đó khi bạn thay đổi một trường, nó gọi một thói quen tìm kiếm. Vấn đề là tôi không thể tìm thấy bất kỳ sự kiện jQuery nào sẽ kích hoạt khi Datepicker cập nhật trường đầu vào.

Vì một số lý do, một sự kiện thay đổi không được gọi khi Datepicker cập nhật trường. Khi lịch bật lên, nó sẽ thay đổi trọng tâm vì vậy tôi cũng không thể sử dụng nó. Có ý kiến ​​gì không?

Bạn có thể sử dụng onSelectsự kiện hẹn hò .

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

Ví dụ trực tiếp :

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

Thật không may, onSelectbắn bất cứ khi nào một ngày được chọn, ngay cả khi nó không thay đổi. Đây là một lỗ hổng thiết kế trong công cụ hẹn hò: Nó luôn kích hoạt onSelect(ngay cả khi không có gì thay đổi) và không kích hoạt bất kỳ sự kiện nào trên đầu vào cơ bản khi thay đổi. (Nếu bạn nhìn vào đoạn code ví dụ đó, chúng tôi đang lắng nghe những thay đổi, nhưng họ không được nâng lên.) Nó có lẽ nên bắn một sự kiện vào đầu vào khi mọi thứ thay đổi (có thể là thông thường changesự kiện, hoặc có thể là một datepicker- cụ thể một).

Nếu bạn thích, tất nhiên, bạn có thể làm cho changesự kiện này inputbùng cháy:

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

Điều đó sẽ kích changehoạt cơ bản inputcho bất kỳ trình xử lý nào được nối thông qua jQuery. Nhưng một lần nữa, nó luôn bắn nó. Nếu bạn chỉ muốn thực hiện một thay đổi thực sự, bạn sẽ phải lưu giá trị trước đó (có thể thông qua data) và so sánh.

Ví dụ trực tiếp :

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

Câu trả lời của TJ Crowder ( https://stackoverflow.com/a/6471992/481154 ) là rất tốt và vẫn chính xác.Kích hoạt sự kiện thay đổi trong chức năng onSelect cũng gần như bạn sẽ nhận được.

Tuy nhiên, có một thuộc tính đẹp trên đối tượng datepicker ( lastVal) sẽ cho phép bạn kích hoạt có điều kiện sự kiện thay đổi chỉ trên các thay đổi thực tế mà không phải tự lưu trữ giá trị:

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

Sau đó, chỉ cần xử lý các sự kiện thay đổi như bình thường:

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

Bạn đang tìm kiếm sự kiện onSelect trong đối tượng datepicker:

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

Tôi đã viết điều này bởi vì tôi cần một giải pháp để kích hoạt một sự kiện chỉ khi ngày thay đổi.

Đó là một giải pháp đơn giản. Mỗi lần hộp thoại đóng lại, chúng tôi sẽ kiểm tra xem dữ liệu đã thay đổi chưa. Nếu có, chúng tôi kích hoạt một sự kiện tùy chỉnh và đặt lại giá trị được lưu trữ.

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

Bây giờ chúng ta có thể kết nối các trình xử lý cho sự kiện tùy chỉnh đó ...

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

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

Tôi đang sử dụng bootstrap-datepicker và không có giải pháp nào ở trên làm việc cho tôi. Câu trả lời này đã giúp tôi ..

Sự kiện ngày thay đổi ngày khởi động của bootstrap không kích hoạt khi chỉnh sửa thủ công ngày hoặc xóa ngày

Đây là những gì tôi áp dụng:

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

Hy vọng điều này có thể giúp đỡ người khác.

Trên jQueryUi 1.9 Tôi đã quản lý để làm cho nó hoạt động thông qua một giá trị dữ liệu bổ sung và kết hợp các hàm beforeShow và 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 );
        }
    }
});

Làm việc cho tôi :)

Tôi biết đây là một câu hỏi cũ. Nhưng tôi không thể có được sự kiện jquery $ (this) .change () để bắn chính xác trênSelect. Vì vậy, tôi đã đi với cách tiếp cận sau đây để kích hoạt sự kiện thay đổi thông qua 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);
         }
     }
});

Thử cái này

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

Hi vọng điêu nay co ich:)

Thử :

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

Hướng dẫn nói:

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

Vì thế:

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

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

Làm việc cho tôi.

Lời khuyên của tôi:

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

Giải pháp của tôi là:

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

DatePicker chọn mã sự kiện thay đổi giá trị bên dưới

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

nếu bạn đang sử dụng wdcalWiki, điều này sẽ giúp bạn

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

sự kiện onReturn hoạt động với tôi

hy vọng điều này giúp đỡ

Tôi nghĩ vấn đề của bạn có thể nằm ở cách thiết lập datepicker của bạn. Tại sao bạn không ngắt kết nối đầu vào ... không sử dụng altField. Thay vào đó, thiết lập rõ ràng các giá trị khi onSelect kích hoạt. Điều này sẽ cung cấp cho bạn quyền kiểm soát từng tương tác; trường văn bản người dùng và datepicker.

Lưu ý: Đôi khi bạn phải gọi thủ tục trên .change () chứ không phải .onSelect () vì onSelect có thể được gọi trên các tương tác khác nhau mà bạn không mong đợi.

Mã giả:

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