web-dev-qa-db-fra.com

Le déclencheur d'événement de changement Jquery Datepicker et l'événement de changement par défaut de l'entrée

J'ai datepicker

  <input type='text' class='inp'>  
<script>
   $('.inp').datepicker();

  $(".inp").on("change",function (){ 
   console.log('inp changed');
  });
</script>

Quand je change pour la première fois '.inp', saisissez manuellement une valeur, puis je clique immédiatement sur le calendrier ouvert de datepicker. Je reçois deux écouteurs d'événement 'changement'. D'abord à partir d'un changement manuel, puis à partir d'un changement de datepicker ... Comment puis-je éviter cela?

javascriptjquerydatepickerjquery-ui-datepicker
12
Konstantin Vahrushev

Définissez votre entrée readOnly, cela vous aidera à modifier la valeur du champ à l'aide de l'icône uniquement.

<input type='text' class='inp' readOnly />

puis utilisez onSelect pour obtenir la date sélectionnée, comme suit:

$(function() {
    $(".inp").datepicker({
        onSelect: function(dateText, inst) {
            // alert(dateText);
        }
    });
});
12
Parkash Kumar

Essayez d’utiliser la fonction onSelect comme ceci:

$(function() {
    $( ".datepicker" ).datepicker({
        onSelect: function() {
        //your code here
    }});

Ceci sera déclenché quand ils choisiront une date dans le calendrier et non quand ils seront en train de taper.

6
brso05

Vous pouvez avoir onSelect déclencher l'événement change sur le champ de texte. Ainsi, modifier la date via la zone de texte ou le sélecteur de date se comporte de la même manière.

$('.inp').datepicker({
  onSelect: function() {
    return $(this).trigger('change');
  }
);

$(".inp").on("change",function (){ 
   console.log('inp changed');
}
2
Shawn Balestracci

Si vous utilisez le programme d'amorçage d’horodatage, vous pouvez procéder comme suit:

$('.datepicker').datepicker()
    .on('changeDate', function(e){
        # `e` here contains the extra attributes
});

Pour plus de détails, consultez: Événements Bootstrap Datepicker

0
Mivaweb

Merci à tous, c'est ce que j'ai utilisé cependant,

function myfunction(x,x2){
    var date1 = new Date(x);
    var MyDateString; 
    MyDateString = date1.getFullYear()+ '/' + ('0' + (date1.getMonth()+1)).slice(-2) + '/' + ('0' + date1.getDate()).slice(-2);
    x2.value=  MyDateString;    
 }

x, étant la valeur datepicker et x2 étant l'objet datepicker

0
athene

Merci! Tout le monde, mais je ne pouvais pas en faire un en lecture seule, c’est une exigence. J'ai donc dû me rechercher. Je poste donc ma solution finale. J'ai fait une déliaison pendant 150 ms, puis une nouvelle liaison . J'ai créé un plugin jquery pour cela

function myfunc(that){
        $(that).one('change', function(){
                var that = this;
                setTimeout(function(){myfunc(that);}, 150);
                //some logic
            }
        )
}

myfunc(".inp");
0
Konstantin Vahrushev