Détecter le changement de date sélectionnée avec bootstrap-datepicker

J’ai un élément d’entrée avec un datepicker attaché créé en utilisant bootstrap-datepicker .

$(document).ready(function() { $('#dp3').datepicker(); $('#date-daily').val('0000-00-00'); $('#date-daily').change(function () { console.log($('#date-daily').val()); }); });

Lorsque l’utilisateur modifie la date en tapant directement dans l’élément d’entrée, je peux obtenir la valeur avec l’événement onChange de l’élément d’entrée, comme indiqué ci-dessus. Mais lorsque l’utilisateur modifie la date à partir de datepicker (en cliquant sur une date du calendrier), le gestionnaire onChange n’est pas appelé.

Comment puis-je détecter les modifications apscopes à la date sélectionnée via le coupleur de date, plutôt que de taper dans l’élément d’entrée?

Toutes les autres réponses sont liées à jQuery UI datepicker , mais la question concerne bootstrap-datepicker .

Vous pouvez utiliser l’événement on changeDate pour déclencher un événement de modification sur l’entrée associée, puis gérer les deux manières de modifier la date à partir du gestionnaire onChange :

date de modification

Fired quand la date est changée.

Exemple:

 $('#dp3').datepicker().on('changeDate', function (ev) { $('#date-daily').change(); }); $('#date-daily').val('0000-00-00'); $('#date-daily').change(function () { console.log($('#date-daily').val()); }); 

Voici un violon de travail: http://jsfiddle.net/IrvinDominin/frjhgpn8/

Essaye ça:

 $("#dp3").on("dp.change", function(e) { alert('hey'); }); 
 $(function() { $('input[name="datetimepicker"]').datetimepicker({ defaultDate: new Date() }).on('dp.change',function(event){ $('#newDateSpan').html("New Date: " + event.date.format('lll')); $('#oldDateSpan').html("Old Date: " + event.oldDate.format('lll')); }); }); 
       


Voici mon code pour cela:

 $('#date-daily').datepicker().on('changeDate', function(e) { //$('#other-input').val(e.format(0,"dd/mm/yyyy")); //alert(e.date); //alert(e.format(0,"dd/mm/yyyy")); //console.log(e.date); }); 

Décommentez simplement celle que vous préférez. La première option modifie la valeur d’un autre élément d’entrée. La seconde alerte la date avec le format par défaut de datepicker. La troisième alerte la date avec votre propre format personnalisé. La dernière option affiche le journal (date de format par défaut).

Vous avez le choix d’utiliser e.date, e.dates (pour une entrée multiple de date) ou e.format (…).

ici quelques infos

 $(document).ready(function(){ $("#dateFrom").datepicker({ todayBtn: 1, autoclose: true, }).on('changeDate', function (selected) { var minDate = new Date(selected.date.valueOf()); $('#dateTo').datepicker('setStartDate', minDate); }); $("#dateTo").datepicker({ todayBtn: 1, autoclose: true,}) ; }); 

Vous pouvez utiliser l’événement onSelect

  $("#date-daily").datepicker({ onSelect: function(dateText) { alert($('#dp3').val()); } }); 

Il est appelé lorsque le sélecteur de date est sélectionné. La fonction reçoit la date sélectionnée en tant que texte et l’instance datepicker en tant que parameters. Cela fait référence au champ de saisie associé.

VOIS ICI