Comment voulez-vous empêcher bootstrap-datepicker de compensation existants valeur de l'entrée si aucune date n'est sélectionné?

Je dois avoir un div avec un utilisateur, date de naissance pré-rempli 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, cependant, lorsque le "dob" entrée reçoit et perd le focus sans faire une sélection de la date, il efface la valeur qui a été pré-rempli.

Cela ne se produira pas si une date a été sélectionné par le datepicker et de l'entrée obtient et perd le focus.

Comment le pré-rempli de la valeur à être maintenu dans le champ si quelqu'un clique-t-il?

Edit: La première fois que vous faites une sélection de la date, il efface le pré-rempli de la valeur, mais ne pas insérer la date sélectionnée jusqu'à ce que vous faites une sélection de la date d'un deuxième temps.

Mise à jour: code du Travail mis à jour!

OriginalL'auteur nikmav | 2014-04-26

  1. 2

    Ne peux pas dire pour sûr, sans plus de un exemple, mais le problème est probablement que le $this->swimmers->dob chaîne, vous donnez à l'entrée n'est pas reconnu comme un format de date par bootstrap-datepicker. Vous pouvez définir le format de la date, il utilise en ajoutant le data-date-format attribut à votre entrée.

    Par exemple, si vous utilisez une base de données MySQL au format date ou de PHP objet DateTime 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>
    Merci @steve-h. N'ai pas la date de l'écho dans le même format face à la paume

    OriginalL'auteur Steve H

  2. 34

    Set Force d'analyser la valeur false:
    forceParse: faux

        $(".applyDatepicker").datepicker({
            forceParse: false
    });
    a fonctionné pour moi 🙂
    il n'a pas de travail pour moi, var start = moment(); var fin = moment().add(2, "jours"); $("input[name=shifting_date]").daterangepicker({ forceParse: false, date de début: début, date de fin: fin, "applyClass" : "btn-sm btn-success",
    s'il vous plaît partagez votre exemple de code
    Merci à vous, @Datta. A travaillé pour moi aussi. Cependant, pourquoi ce travail? Je charge la page avec une date valide, cliquez dans le champ, cliquez à l'extérieur, et sans le au-dessus du pavillon, la valeur est vide.

    OriginalL'auteur Datta

  3. 2

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

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

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

    Je suis en train de travailler avec bootstrap v3.1.1 et suivants du code a fonctionné pour moi

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

    pour remplir le contrôle datepicker. De cette façon, Bootstrap reconnaît de la date et de ne pas l'effacer si le contrôle obtient et perd le focus

    OriginalL'auteur Muhammad Waqas Iqbal

  4. 1

    J'ai eu un problème similaire quand un utilisateur clique sur le même jour deux fois. La zone "bascule" entre la date cliqué sur et un champ vide. En gros, je ne voulais pas qu'elle soit vide à tout moment, donc voici comment j'ai eu autour de ce que, en partie grâce à Waqas réponse:

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

    Qu'elle conserve relativement autonome, par mémorisation de la dernière valeur de date dans cette instance de la datepicker et les résultats dans aucune compensation de l'entrée.

    Je sais que vous avez résolu ce problème, mais j'ai pensé que cet extrait pourrait venir dans maniable pour quelqu'un d'autre dans une situation similaire.

    OriginalL'auteur George Inggs

  5. 0

    Lorsque jQuery appelle un gestionnaire, le ce mot-clé est une référence à l'élément sur lequel l'événement est en cours de livraison. Par ailleurs, une chaîne vide sera d'évaluer la vrai. Sur la base de ces faits, il suffit de faire une vérification dans le gestionnaire d'événements. Voir l'exemple de code ci-dessous.

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

    REMARQUE: Pour plus d'efficacité et de lisibilité dans l'exemple de code ci-dessus, la propriété DOM valeur est cochée, la place de l'habillage ce dans un objet jQuery et de l'appel de val () ( $(this ).val() ). C'est une légère amélioration, mais c'est une bonne pratique pour être aussi compact/simple que possible.

    OriginalL'auteur Stephan van Hoof

  6. 0

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

    $('.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, quand utiliser la méthode de mise à jour, datepicker n'a pas perdu options.

    OriginalL'auteur track3r