web-dev-qa-db-fra.com

Détecter la modification de la date sélectionnée avec bootstrap-datepicker

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

<div class="well">
    <div class="input-append date" id="dp3" data-date="2012-01-02" data-date-format="yyyy-mm-dd">
        <input type="text" id="date-daily">
        <span class="add-on"><i class="icon-th"></i></span>    
    </div>
</div>

<script language="JavaScript" type="text/javascript">
    $(document).ready(function() {
        $('#dp3').datepicker();
        $('#date-daily').val('0000-00-00');
        $('#date-daily').change(function () {
            console.log($('#date-daily').val());
        });
    });
</script>

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 (c’est-à-dire en cliquant sur une date dans le calendrier), le gestionnaire onChange n’est pas appelé.

Comment détecter les modifications apportées à la date sélectionnée via le sélecteur de date plutôt que de les saisir dans l'élément d'entrée?

jquerytwitter-bootstrapdatepickerbootstrap-datepicker
64
user2269756

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 méthodes de modification de la date à partir du gestionnaire onChange:

date de modification

Renvoyé lorsque 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 qui fonctionne: http://jsfiddle.net/IrvinDominin/frjhgpn8/

117
Irvin Dominin

Essaye ça:

$("#dp3").on("dp.change", function(e) {
    alert('hey');
});
32
Petr
$(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'));
  });
  
});
<link href="http://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/build/css/bootstrap-datetimepicker.css" rel="stylesheet"/>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://momentjs.com/downloads/moment.min.js"></script>
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
<script src="http://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js"></script>

<div class="container">
  <div class="col-xs-12">
    <input name="datetimepicker" />
    <p><span id="newDateSpan"></span><br><span id="oldDateSpan"></span></p>
  </div>
</div>
12
crashtestxxx

Voici mon code pour ça:

$('#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 celui que vous préférez. La première option modifie la valeur d'un autre élément d'entrée. Le second alerte la date avec le format par défaut datepicker. Le troisième alerte la date avec votre propre format personnalisé. La dernière option est enregistrée dans le journal (format par défaut).

Vous avez le choix entre e.date, e.dates (pour la saisie de plusieurs dates) ou e.format (...).

ici quelques infos supplémentaires

10
Lucio Chávez
$(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,}) ;

});
1
Sandeep Yadav

Sur la base de Irvin Dominin par exemple, j'ai créé 2 exemples prenant en charge Coller et appuyer sur Entrée.

Cela fonctionne sous Chrome: http://jsfiddle.net/lhernand/0a8woLev/

$(document).ready(function() {
   $('#date-daily').datepicker({
      format: 'dd/mm/yyyy',
      assumeNearbyYear: true,
      autoclose: true,
      orientation: 'bottom right',
      todayHighlight: true,
      keyboardNavigation: false
    })
    /* On 'paste' -> loses focus, hide calendar and trigger 'change' */
    .on('paste', function(e) {
      $(this).blur();
      $('#date-daily').datepicker('hide');
    })
    /* On 'enter' keypress -> loses focus and trigger 'change' */
    .on('keydown', function(e) {

      if (e.which === 13) {
         console.log('enter');
         $(this).blur();
      }
    })
    .change(function(e) {
      console.log('change');
      $('#stdout').append($('#date-daily').val() + ' change\n');
    });
});

Mais pas dans IE, j'ai donc créé un autre exemple pour IE11: https://jsbin.com/timarum/14/edit?html,js,console,output

$(document).ready(function() {
   $('#date-daily').datepicker({
      format: 'dd/mm/yyyy',
      assumeNearbyYear: true,
      autoclose: true,
      orientation: 'bottom right',
      todayHighlight: true,
      keyboardNavigation: false
    })
    // OnEnter -> lose focus
    .on('keydown', function(e) {
         if (e.which === 13){ 
           $(this).blur();
         }
    })
    // onPaste -> hide and lose focus
    .on('keyup', function(e) {
         if (e.which === 86){ 
            $(this).blur();
            $(this).datepicker('hide');
          }
    })
    .change(function(e) {
       $('#stdout').append($('#date-daily').val() + ' change\n');
    });
});

Si le dernier exemple ne fonctionne toujours pas dans IE11, vous pouvez essayer de scinder la configuration:

// DatePicker setup
$('.datepicker').datepicker({
    format: 'dd/mm/yyyy',
    assumeNearbyYear: true,      /* manually-entered dates with two-digit years, such as '5/1/15', will be parsed as '2015', not '15' */
    autoclose: true,             /* close the datepicker immediately when a date is selected */
    orientation: 'bottom rigth',
    todayHighlight: true,        /* today appears with a blue box */
    keyboardNavigation: false    /* select date only onClick. when true, is too difficult free typing  */
});

Et les gestionnaires d'événements: (notez que je n'utilise pas $('.datepicker').datepicker({)

   // Smoker DataPicker behaviour
    $('#inputStoppedDate')
    // OnEnter -> lose focus
    .on('keydown', function (e) {
        if (e.which === 13){ 
            $(this).blur();
        }
    })
    // onPaste -> hide and lose focus
    .on('keyup', function (e) {
        if (e.which === 86){ 
            $(this).blur();
            $(this).datepicker('hide');
        }
    })
    .change(function (e) {
        // do saomething
    });
0
Luis Hernandez