Problema no evento do jQuery Datepicker onchange

Eu tenho um código JS no qual, quando você altera um campo, ele chama uma rotina de pesquisa. O problema é que não consigo encontrar nenhum evento jQuery que será acionado quando o Datepicker atualizar o campo de entrada.

Por algum motivo, um evento de alteração não é chamado quando o Datepicker atualiza o campo. Quando o calendário aparece, ele muda o foco, então também não posso usá-lo. Alguma ideia?

Você pode usar o onSelectevento do datepicker .

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

Exemplo ao vivo :

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

Infelizmente, é onSelectacionado sempre que uma data é selecionada, mesmo que não tenha sido alterada. Essa é uma falha de design no datepicker: sempre é acionada onSelect(mesmo que nada tenha sido alterado) e não dispara nenhum evento na entrada subjacente na alteração. (Se você procurar no código desse exemplo, estamos ouvindo as alterações, mas elas não estão sendo levantadas.) Provavelmente, deve disparar um evento na entrada quando as coisas mudarem (possivelmente o changeevento usual ou possivelmente um datepicker- específico).

Se você quiser, é claro, pode fazer o changeevento pegar inputfogo:

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

Isso será acionado changeno subjacente inputpara qualquer manipulador conectado via jQuery. Mas, novamente, sempre dispara. Se você deseja acionar apenas uma alteração real, precisará salvar o valor anterior (possivelmente via data) e comparar.

Exemplo ao vivo :

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

A resposta de TJ Crowder ( https://stackoverflow.com/a/6471992/481154 ) é muito boa e ainda permanece precisa. O acionamento do evento de alteração na função onSelect é o mais próximo possível.

No entanto, existe uma boa propriedade no objeto datepicker ( lastVal) que permitirá que você acione condicionalmente o evento de alteração apenas em alterações reais sem precisar armazenar os valores:

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

Em seguida, basta manipular eventos de alteração como normal:

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

Você está procurando o evento onSelect no objeto datepicker:

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

Escrevi isso porque precisava de uma solução para acionar um evento apenas se a data fosse alterada.

É uma solução simples. Cada vez que a caixa de diálogo é fechada, testamos para ver se os dados foram alterados. Se houver, acionamos um evento personalizado e redefinimos o valor armazenado.

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

Agora podemos conectar manipuladores para esse evento personalizado ...

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

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

Estou usando o bootstrap-datepicker e nenhuma das soluções acima funcionou para mim. Esta resposta me ajudou ..

O evento de data de modificação do selecionador de data de inicialização não é acionado ao editar manualmente ou limpar a data

Aqui está o que eu apliquei:

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

Espero que isso possa ajudar os outros.

No jQueryUi 1.9, consegui fazê-lo funcionar com um valor de dados adicional e uma combinação das funções beforeShow e 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 );
        }
    }
});

Funciona para mim :)

Eu sei que esta é uma pergunta antiga. Mas não foi possível obter o evento jquery $ (this) .change () para disparar corretamente em Select. Então, eu fui com a seguinte abordagem para disparar o evento de mudança via 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);
         }
     }
});

Tente isto

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

Espero que isto ajude:)

Experimentar :

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

O manual diz:

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

Assim:

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

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

Funciona para mim.

Minha solução:

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

Minha solução é:

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

Código de evento de alteração de valor selecionado pelo DatePicker abaixo

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

se você estiver usando wdcalendar, isso ajudará você

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

o evento onReturn funciona para mim

espero que isso ajude

Acho que seu problema pode estar na forma como o datepicker está configurado. Por que você não desconecta a entrada ... não use altField. Em vez disso, defina explicitamente os valores quando o onSelect for acionado. Isso lhe dará controle de cada interação; o campo de texto do usuário e o selecionador de data.

Nota: Às vezes, é necessário chamar a rotina em .change () e não em .onSelect () porque onSelect pode ser chamado em diferentes interações que você não espera.

Pseudo-código:

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