Bootstrap Datepicker sur le changement de cuisson 3 fois

Salut j'ai essayé de juste obtenir la date d'un bootstrap date picker et j'ai été capable de mais il semble tirer 3 fois. NOTE: Ce n'est pas jquery date picker mais bootstrap date picker.

à l'Aide de ce sélecteur de date: https://github.com/eternicode/bootstrap-datepicker, pas plus eyecon.ro un.

 $(".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 autres que le changement, comme

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

Mais cela ne fonctionne pas fermer cueilleur de dattes, en espérant qu'il y a une solution facile à cela. thx

20
demandé sur Hard Fitness 2014-03-24 19:43:17

11 réponses

cela ne règle pas le problème, mais j'utilisais le curseur de données pour envoyer par un post ajax, donc les 3 événements de changement me causaient 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 lancer l'événement change de l'étiquette d'Entrée 3 fois. la valeur ne change pas 3 fois!

j'ai écrit une simple fonction 'debounce' pour contourner le problème. ne règle pas le problème - ce qui est dû à de multiples événements de changement étant tiré de l'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);
}

c'est assez simple, il suffit de trouver l '"événement" jquery, et s'assure que les valeurs dans une fenêtre de 300ms sont ignorées. dans mes tests, tout cela est arrivé en 30 msec ou plus.

6
répondu pgee70 2014-07-28 12:52:25

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

s'il vous Plaît consulter la documentation ici pour plus d'information sur cet événement.

35
répondu seeARMS 2014-03-24 15:53:06

Similaire à la réponse ci-dessus, mais vous devez utiliser correcteur de données 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 que dans mon cas, j'ai renommé la fonction datepickerBootstrap pour éviter le choc avec JQuery. Ainsi, il deviendrait:

var datePicker = $('.date-picker').datepickerBootstrap().on('changeDate', function(ev) {
    // On change functionality
});
1
répondu astralbat 2015-06-18 12:53:19

il semble comme si en vérifiant le change événement, si le changement a été de réels interaction de l'utilisateur, l'événement change contient une valeur pour originalEvent.

cas ne PAS contenir 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 installé:

Générique initial setup

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

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

Poignée bootstrap-datepicker spécifique les modifications

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

Maintenant, traiter avec interaction de l'utilisateur change

$('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 le handleInputDateAndTimeChange function

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

    // Do what you want with $input object here...
}
1
répondu Feng Huo 2015-07-16 21:35:36

j'ai essayé la réponse de #pgee70 et ça ne marche pas pour moi. Donc c'est 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 de viande, mais son travail.

1
répondu Hictus 2016-11-22 08:56:36

Obtenir la variable globale compter et vérifier si égal à 0 alors l'exécution de Votre fonction.

var count=0;
     $( "#Id" ).datepicker({ minDate: 0}).on('change',function (){
            if(count==0) 
           validity();//any function
           count=1;
         });
     validity(){ count=0;}
0
répondu ABIRAMAN 2015-03-12 11:08:19

un peu agaçant.. 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
répondu Noviana Alvi 2015-09-19 12:31:29

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

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

});

le truc est d'utiliser changeDate au lieu de change.

0
répondu Juan Martínez 2016-06-17 20:19:58

veuillez utiliser la fonction changeDate à la place du changement .

0
répondu Neeraj Rawat 2018-08-15 12:03:04

il est corrigé Trouvez votre fichier JS datepicker ici

Lire la fixation description ici

-1
répondu Mohammad Zeshan 2015-12-15 07:21:42

var pickerFireCount = 0;

function checkSelectedDateIsHollyday(rId) {
  pickerFireCount++;
  if (pickerFireCount == 3) {
    if (!selectedDateIsHolyday(rId)) {
      showInfoMessage('The date you selected is a holiday.');
      pickerFireCount = 0;
    }
  }
}
-1
répondu sudeetha nuwan 2016-08-18 16:04:52