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
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.
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.
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
});
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...
}
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.
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;}
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;
}
});
});
Comme certains l'ont déjà mentionné, utilisez ceci:
$('#calendar').on("changeDate", function() {
});
le truc est d'utiliser changeDate
au lieu de change
.
veuillez utiliser la fonction changeDate à la place du changement .
var pickerFireCount = 0;
function checkSelectedDateIsHollyday(rId) {
pickerFireCount++;
if (pickerFireCount == 3) {
if (!selectedDateIsHolyday(rId)) {
showInfoMessage('The date you selected is a holiday.');
pickerFireCount = 0;
}
}
}