web-dev-qa-db-fra.com

Bootstrap Datepicker lors du changement de tir 3 fois

Salut, j'ai essayé d'obtenir la date d'un sélecteur de date bootstrap et j'ai pu le faire, mais il semble se déclencher 3 fois. REMARQUE: ce n'est pas un sélecteur de date jquery mais bootstrap sélecteur de date.

En utilisant ce sélecteur de date: https://github.com/eternicode/bootstrap-datepicker , pas un eyecon.ro plus ancien.

 $(".date-picker").on("change", function(e) {
      contents = $(this).val();
      id = $(this).attr('id');
      console.log("onchange contents: " + contents);
      console.log("onchange id: " + id);

 });

HTML:

<input id="start_date" type="text" data-date-format="yyyy-mm-dd" class="date-picker form-control" />

J'ai utilisé quelques autres options que le changement, comme

$('.date-picker').datepicker().change(function(){};

Mais cela ne ferme pas le sélecteur de date, en espérant qu'il existe une solution facile à cela. THX

javascriptjquerytwitter-bootstrapdatepicker
21
Hard Fitness

cela ne résout pas le problème, mais j'utilisais le sélecteur de date pour envoyer via un message ajax, donc les 3 événements de changement me posaient des problèmes - le 3ème événement a toujours échoué. même si la documentation dit d'utiliser un événement changeDate, il ne me semble pas juste de déclencher l'événement change de la balise d'entrée 3 fois. la valeur ne change pas 3 fois!

J'ai écrit une simple fonction "anti-rebond" pour contourner le problème. ne résout pas le problème - qui est dû à plusieurs événements de changement déclenchés à partir des méthodes: setValue (ligne 508) _setDate: (ligne 1048) et setValue (ligne 508) (version 1.3.0) du widget.

 var lastJQueryTS = 0 ;// this is a global variable.
 ....
 // in the change event handler...
    var send = true;
if (typeof(event) == 'object'){
    if (event.timeStamp - lastJQueryTS < 300){
        send = false;
    }
    lastJQueryTS = event.timeStamp;
}
if (send){
    post_values(this);
}

il est assez simple, trouve juste "l'événement" jquery et s'assure que les valeurs dans une fenêtre de 300 ms sont ignorées. lors de mes tests, tout cela s'est produit en 30 ms environ.

8
pgee70

Vous devez utiliser l'événement "changeDate". Par exemple:

var datePicker = $('.date-picker').datePicker().on('changeDate', function(ev) {
    //Functionality to be called whenever the date is changed
});

Veuillez consulter la documentation ici pour plus d'informations sur cet événement.

36
seeARMS

Comme certains l'ont déjà mentionné, utilisez ceci:

$('#calendar').on("changeDate", function() {

});

L'astuce consiste à utiliser changeDate au lieu de change.

3
Juan Martínez

Il semble que lors de la vérification de l'événement change, si le changement provenait de interaction utilisateur, l'événement change contient une valeur pour originalEvent.

L'événement ne PAS contient cette valeur si l'entrée a été modifiée via JS: $obj.val('1990-03-07').change() et la même chose avec bootstrap-datepicker

Voici comment je l'ai configuré:

Configuration initiale générique

// General selector for date inputs
var $obj = $('input[type="date"]');

$obj.datepicker({
    // options here, not important for this example
});

Manipuler bootstrap-datepicker modifications spécifiques

$obj.datepicker().on('changeDate', function (event) {
    handleInputDateAndTimeChange(event);
});

Maintenant, gérons interaction avec l'utilisateur changements

$('input[type="date"], input[type="time"]').change(function (event) {
    // This checks if change was initiated by user input and NOT JS
    if(event.originalEvent !== undefined) {
        handleInputDateAndTimeChange(event);
    }
});

Et enfin, voici la fonction handleInputDateAndTimeChange

function handleInputDateAndTimeChange(event) {
    var $input = $(event.target);

    // Do what you want with $input object here...
}
2
Feng Huo

Similaire à la réponse ci-dessus, mais vous devez utiliser datepicker sauf si vous avez renommé la fonction:

var datePicker = $('.date-picker').datepicker().on('changeDate', function(ev) {
    //Functionality to be called whenever the date is changed
});

Cela fonctionne pour moi, sauf dans mon cas, j'ai renommé la fonction en datepickerBootstrap pour éviter le conflit avec JQuery. Alors ça deviendrait:

var datePicker = $('.date-picker').datepickerBootstrap().on('changeDate', function(ev) {
    // On change functionality
});
1
user1315637

J'ai essayé la réponse de # pgee70 et cela ne fonctionne pas pour moi. Voici donc ma solution, j'espère que son aide

var send=true;

 $('.input-group.date').datepicker({
     todayBtn: "linked",
     keyboardNavigation: false,
     forceParse: false,
     language: 'es-ES',
     weekStart: 1,
     format: 'dd/mm/yyyy',
     enableOnReadonly:false,
     calendarWeeks: true,
     autoclose: true,
     todayHighlight:true
 }).on("changeDate", function(e) {
     if(send){
        modificarFechaAplicacionCliente($("#input_filtro_fecha_cliente").val());
        send=false;
     }

     setTimeout(function(){send=true;},200);
 });

Ce n’est pas une solution audacieuse, mais cela fonctionne.

1
Hictus

peu ennuyeux .. mon code était:

var c=0;var send=false;
    $(document).ready(function() {
        jQuery( ".ed" ).datepicker({ 
            format: "yyyy-mm-dd",
            autoclose:!0
        }).on('change',function() {
            if(c==2){
                c=0;
                send=true;
            }else{
                c++;
                send=false;
            }                
        });

    });
0
Noviana Alvi

Obtenez le nombre de variables globales et vérifiez s'il est égal à 0, puis exécutez votre fonction.

var count=0;
     $( "#Id" ).datepicker({ minDate: 0}).on('change',function (){
            if(count==0) 
           validity();//any function
           count=1;
         });
     validity(){ count=0;}
0
ABIRAMAN
var LastController =['id','value']; //global variable...
 function datepeakerchange(e){ 

 if ((LastController[0] != e.target.id && LastController[1] != e.target.value) || (LastController[0] == e.target.id && LastController[1] != e.target.value)) {

            LastController[0] = e.target.id;
            LastController[1] = e.target.value;


    write your code....


    }
}
0
user12078979

Veuillez utiliser la fonction changeDate à la place du changement.

0
Neeraj Rawat