web-dev-qa-db-fra.com

Comment empêchez-vous bootstrap-datepicker d'effacer la valeur existante de l'entrée si aucune date n'est sélectionnée?

J'ai une div avec la date de naissance d'un utilisateur déjà renseignée avec php:

<div id="datepicker" class="input-group date">
    <label for="dob">Date of Birth</label> <input type="text" class="form-control" id="dob" name="dob" value="<?php $date = new DateTime($this->swimmers->dob); echo $date->format('d/m/Y');?>"><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
</div>

Le javascript:

<script>     
    $('.container .input-group.date').datepicker({
    startDate: "01/01/1900",
    endDate: "01/01/2100",
    format: "dd/mm/yyyy",
    autoclose: true,
    todayHighlight: true
    });
</script>

Bootstrap est configuré et fonctionne correctement. Toutefois, lorsque l’entrée "dob" obtient et perd le focus sans effectuer de sélection de date, elle efface la valeur préremplie.

Cela ne se produit toutefois pas si une date a été sélectionnée via le sélecteur de date et que l'entrée obtient et perd le focus.

Comment la valeur pré-renseignée peut-elle être conservée dans le champ si quelqu'un clique dessus?

Modifier: lors de la première sélection de date, la valeur pré-remplie est effacée mais la date sélectionnée n’est pas insérée tant que vous ne l'avez pas sélectionnée une seconde fois.

Mise à jour: Code de travail mis à jour!

javascriptphptwitter-bootstrapdatepickerbootstrap-datepicker
16
nikmav

Je ne peux le dire avec certitude sans plus d'exemples, mais le problème est probablement que la chaîne $this->swimmers->dob que vous donnez à l'entrée n'est pas reconnue comme format de date par bootstrap-datepicker. Vous pouvez définir le format de date utilisé en ajoutant l'attribut data-date-format à votre entrée.

Par exemple, si vous utilisiez une date au format MySQL ou l'objet DateTime de PHP avec $date->format('Y-m-d'), vous pouvez utiliser:

<div id="datepicker" class="input-group date">
    <input type="text" class="form-control" id="dob" name="dob" value="<?php echo $this->swimmers->dob;?>" data-date-format="yy-mm-dd"><span class="input-group-addon"><i class="glyphicon glyphicon-th"></i></span>
</div>
2
Steve H

Définissez Valeur d'analyse forcée sur false: ForceParse: false

    $(".applyDatepicker").datepicker({
            forceParse: false
    });
35
Datta

Je ne suis pas sûr de son fonctionnement en php mais pour mvc, j'ai le même problème que Bootstrap efface la valeur si le contrôle obtient et perd le focus sans faire de sélection de date. 

J'ai trouvé que Bootstrap efface la valeur car il ne reconnaît pas la valeur définie par

$('#dtControl').val(nextMonth);

Je travaille avec bootstrap v3.1.1 et le code suivant a fonctionné pour moi

$('#dtControl').datepicker('setDate', nextMonth);

remplir le contrôle datepicker. De cette façon, Bootstrap reconnaît la date et ne l’efface pas si le contrôle obtient ou perd le focus.

2
Muhammad Waqas Iqbal

J'ai eu un problème similaire quand un utilisateur a cliqué deux fois sur la même date. Le champ "basculerait" entre la date cliquée et un champ vide. En gros, je ne voulais absolument pas qu'il soit vide, alors voici comment j'ai réussi à contourner cela, en partie grâce à la réponse de Waqas:

var datepickerContainer = $('#datepicker');

datepickerContainer.datepicker({
    startDate: "01/01/1900",
    endDate: "01/01/2100",
    format: "dd/mm/yyyy",
    autoclose: true,
    todayHighlight: true
}).on('show', function() {
    datepickerContainer.datepicker.currentDate = $('input#dob').val(); //update this instance with the current value
}).on('changeDate', function(event) {
    var newDate = $('input#dob').val();
    if (newDate == '' || newDate == null) { //check if the new value is empty - if it is, then just set it back to the last known date for this instance
        datepickerContainer.datepicker('setDate', datepickerContainer.datepicker.currentDate);
    }
});

Cela le maintient relativement autonome, en stockant la dernière valeur de date dans cette instance du sélecteur de date et n'entraîne aucun effacement de l'entrée.

Je sais que vous avez résolu ce problème, mais j’ai pensé que cet extrait de code pourrait être utile à quelqu'un d’autre dans une situation similaire.

1
George Inggs

Lorsque jQuery appelle un gestionnaire, le mot-clé this est une référence à l'élément où l'événement est livré. De plus, une chaîne non vide sera évaluée à true . Sur la base de ces faits, effectuez simplement une vérification dans le gestionnaire d'événements. Voir exemple de code ci-dessous.

            .find( 'input[name=startDate]' )
                .datepicker( {format: 'dd-mm-yyyy'} )
                .on( 'changeDate', function() {
                    if( this.value ) { 
                        << do something >>
                    }
                });

REMARQUE: pour des raisons d'efficacité et de lisibilité dans l'exemple de code ci-dessus, la propriété DOM valeur est vérifiée au lieu d'encapsuler this dans un objet jQuery et en appelant val () .val ()). Il s’agit d’une amélioration mineure, mais c’est une bonne pratique d’être aussi simple/compacte que possible.

0
Stephan van Hoof

Une autre solution consiste à définir les options au niveau global:

$('.datepicker').datepicker();
$.fn.datepicker.defaults.format = 'dd/mm/yyyy';
$.fn.datepicker.defaults.startDate = "0";
$.fn.datepicker.defaults.language = "es";
$.fn.datepicker.defaults.autoclose = true;
$.fn.datepicker.defaults.todayHighlight = true;
$.fn.datepicker.defaults.todayBtn = true;
$.fn.datepicker.defaults.weekStart = 1;

Maintenant, lorsque vous utilisez la méthode de mise à jour, datepicker ne perd pas d’options.

0
track3r