jQuery Datepicker onchange 이벤트 문제

필드를 변경할 때 검색 루틴을 호출하는 JS 코드가 있습니다. 문제는 Datepicker가 입력 필드를 업데이트 할 때 발생하는 jQuery 이벤트를 찾을 수 없다는 것입니다.

어떤 이유로 Datepicker가 필드를 업데이트 할 때 변경 이벤트가 호출되지 않습니다. 캘린더가 팝업되면 포커스를 변경하여 사용할 수 없습니다. 어떤 아이디어?

datepicker 's onSelectevent를 사용할 수 있습니다 .

$(".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날짜가 변경되지 않은 경우에도 날짜가 선택 될 때마다 발생합니다. 이것은 날짜 선택기의 디자인 결함입니다. onSelect변경 사항이 없더라도 항상 발생 하며 변경시 기본 입력에서 이벤트를 발생 시키지 않습니다 . (이 예제의 코드를 보면 변경 사항을 수신하고 있지만 변경되지는 않습니다.) 상황이 변경 될 때 입력에서 이벤트를 발생시켜야합니다 (일반적인 change이벤트 또는 아마도 날짜 선택기- 하나).

물론 원하는 경우 불에 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!
});

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에서 실행할 수 없습니다. 그래서 바닐라 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());
        }
      }); 

onReturn 이벤트가 저에게 효과적입니다.

이 도움을 바랍니다

날짜 선택기 설정 방법에 문제가 있다고 생각합니다. altField를 사용하지 마십시오. 대신 onSelect가 실행될 때 값을 명시 적으로 설정하십시오. 이를 통해 각 상호 작용을 제어 할 수 있습니다. 사용자 텍스트 필드 및 날짜 선택기

참고 : 때로는 원하지 않는 다른 상호 작용에서 onSelect를 호출 할 수 있으므로 .onSelect ()가 아닌 .change ()에서 루틴을 호출해야하는 경우가 있습니다.

의사 코드 :

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