jQuery UI 변경 이벤트 문제에 대한 날짜 선택기

jQuery UI 변경 이벤트 문제에 대한 날짜 선택기

JS 코드가 있는데, 필드를 변경하면 검색 루틴이라고 합니다.문제는 날짜 선택기가 입력 필드를 업데이트할 때 실행될 jQuery 이벤트를 찾을 수 없다는 것입니다.

어떤 이유에서인지 날짜 선택기가 필드를 업데이트할 때 변경 이벤트가 호출되지 않습니다.달력이 뜨면 포커스가 바뀌어서 저도 사용할 수가 없어요.아이디어 있어요?

당신은 데이트 상대의 이벤트를 이용할 수 있습니다.

$(".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="https://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<input type='text' class='date'>
<script src="https://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="https://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="https://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<input type='text' class='date'>
<script src="https://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

T.J. 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 이벤트를 찾고 있습니다.

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

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

날짜가 바뀌어야만 이벤트를 유발할 수 있는 해결책이 필요해서 이렇게 썼습니다.

이것은 간단한 해결책입니다.대화 상자가 닫힐 때마다 데이터가 변경되었는지 테스트합니다.이 경우 사용자 지정 이벤트를 트리거하고 저장된 값을 재설정합니다.

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

저는 부트스트랩 날짜 선택기를 사용하고 있는데 위의 솔루션은 저에게 적합하지 않습니다.이 대답은 나에게 도움이 되었습니다.

수동으로 날짜를 편집하거나 날짜를 지울 때 부트스트랩 날짜 선택기 날짜 변경 이벤트가 발생하지 않음

제가 지원한 것은 다음과 같습니다.

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

이것이 다른 사람들에게 도움이 되기를 바랍니다.

이것이 오래된 질문이라는 것을 압니다.하지만 저는 $(이것)에 대한 jquery를 받지 못했습니다.Change() 이벤트를 Select(선택)에서 올바르게 실행합니다.그래서 저는 바닐라 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);
         }
     }
});

시도:

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

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

나에게 효과가 있습니다 :)

사용해 보세요.

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

이것이 도움이 되길 바랍니다:)

설명서에 표시된 내용:

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

제 생각에 당신의 문제는 당신의 데이트 선택기가 어떻게 설정되어 있는지에 있을 것 같습니다.입력을 끊는 게 어때요?altField를 사용하지 않습니다.대신 onSelect가 실행될 때 값을 명시적으로 설정합니다.이렇게 하면 사용자 텍스트 필드 및 날짜 선택기와 같은 각 상호 작용을 제어할 수 있습니다.

참고: 때때로 Select()가 아닌 .change()의 루틴을 호출해야 합니다. Select()의 경우 예상치 못한 다양한 상호 작용에 대해 호출될 수 있기 때문입니다.

유사 코드:

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

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

리턴에 대한 이벤트는 나에게 효과가 있습니다.

이것이 도움이 되길 바랍니다.

내 솔루션은 다음과(와)

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

여러분들 중 몇몇은 아마 어떤 것을 사용하고 있을 것입니다.XDSoft DateTimePicker https://xdsoft.net/jqplugins//https://xdsoft.net/jqplugins/datetimepicker/

거기서, 변화 이벤트는

onSelectDate: function(){
  alert('change date event);
}

날짜 선택 시 https://xdsoft.net/jqplugins/datetimepicker/ #

당신은 할 수 .onClose 션옵에 대한 datepicker그리고 당신의 변경 코드를 안에 넣습니다.이것은 다음과 같은 경우에 트리거됩니다.datepicker모달이 닫혔습니다.변경 이벤트를 트리거하려고 했지만 작동하지 않아 코드를 내부에 넣었습니다.onClose대신에 효과가 있습니다.에 대해서도 마찬가지일 수 있습니다.onSelect날짜를 선택할 때 트리거해야 하는 경우 언급된 항목입니다.

$('#el').datepicker({ 
   onClose: function () {
     // code here
   }
});

날짜 선택 옵션 https://api.jqueryui.com/datepicker/

이 접근 방식은 간단하며 텍스트 상자 제어와 함께 항상 작동합니다. $('#controlID').on('changeDate', function() { $(this).change(); });

언급URL : https://stackoverflow.com/questions/6471959/jquery-ui-datepicker-onchange-event-issue