Bootstrap datepicker et bootstrap validateur

Je suis en utilisant le bootstrap datepicker de ici et le démarrage du programme de validation de ici. Aussi, je suis en utilisant bootstrap v3.1.1.

Après la sélection d'une date de datepicker le validateur ne réagit pas. Il fonctionne seulement lorsque j'utilise le clavier pour entrer une date.

Voici mon code HTML:

<form id="myForm" method="POST"> 
   <div class="col-lg-3">
     <div class="form-group">
        <input name="endDate" type="text" class="datepicker form-control">
     </div>
   </div>
</form>

.fichier js, j'ai ajouté:

$(document).ready(function () {
  $('.datepicker').datepicker();
)};

et des validateurs:

$(document).ready(function () {
    $('#myForm').bootstrapValidator({
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            endDate: {
                validators: {
                    date: {
                        format: 'DD/MM/YYYY',
                        message: 'The format is dd/mm/yyyy'
                    },
                    notEmpty: {
                        message: 'The field can not be empty'
                    }
                }
            }
        }
    });
});

Pouvez-vous nous dire qui sont ces deux plugins que vous utilisez? Le validateur peut être facile à deviner, mais il aidera votre post si vous avez mentionné les deux plugins.
Pour la validation je utiliser bootstrapValidator.min.js version v0.5.0, construit sur 2014-07-14 et pour datepicker-je utiliser bootstrap-datepicker.js la version 3.1.1 et j'utilise jquery 1.10.2.
Je voulais donner les liens des plugins pages. E. g. pour la validation êtes-vous à l'aide de ce bootstrapvalidator.com? Pour le datepicker, êtes-vous à l'aide de ce vitalets.github.io/bootstrap-datepicker?
Oui, j'utilise le datepicker et les validateurs de les deux liens cités par vous. Et j'utilise un datetimepicker à partir de eonasdan.github.io/bootstrap-datetimepicker qui j'ai le même problème. Merci pour votre réponse.

OriginalL'auteur user3411746 | 2014-08-27

14

Lors de l'utilisation de BootstrapValidator avec Bootstrap-datetimepicker ou Bootstrap-datepicker, vous devriez revalider le champ de date.

De sorte que vous devez ajouter ceci:

1) à l'aide avec bootstrap-datetimepicker :
```
$('.date')
    .on('dp.change dp.show', function(e) {
        //Revalidate the date when user change it
        $('#myForm').bootstrapValidator('revalidateField', 'endDate');
});
```
2) à l'aide avec bootstrap-datepicker :
```
$('.datepicker')
    .on('changeDate show', function(e) {
        //Revalidate the date when user change it
        $('#myForm').bootstrapValidator('revalidateField', 'endDate');
});
```
Voir le datetimepicker exemple pour plus d'informations.

J'ai une question qui data.bv.isValid() est toujours false
veuillez créer une nouvelle question, ou de créer un problème sur le bon de référentiel dans le github.com/nghuuphuoc/bootstrapvalidator/issues/new

OriginalL'auteur Arkni
5

En quelque sorte, après la sélection d'une date, datepicker() perd le focus du champ de date et aucun validateur plugins pouvez voir la date d'entrée champ rempli (valide).
En conclusion, un simple .focus() fait le tour.
```
$('#datefield').datepicker({
  //datepicker methods and settings here
}).on('changeDate', function (e) {
  $(this).focus();    
});
```
garçon, vous êtes simple mais ingénieuse solution m'a sauvé un cas majeur de brûlures! Muchas gracias! 🙂
En fait, j'ai parlé trop vite. L'ajout de la .focus() semble résoudre le problème, mais il n'a pas vraiment la classe non valide a été supprimé w/ mais le valider plugin toujours considéré comme le champ non valide!
qui validateur plugin utilisez-vous?
L'un à jqueryvalidation.org - qu'est-ce résolu, c'était la solution fournie par @Sparky sur un autre fil, au lieu de $(this).focus() , j'ai utilisé $(this).valide(). Qui a fait le tour.

OriginalL'auteur Aaron Marton

Ci-dessus accepté la réponse n'a pas fonctionné pour moi. Ce qui a fonctionné pour moi, c'était très simple.

$('#datefield').datepicker().on('changeDate', function (e) {
         $('#datefield').focus();
         $('#anyotherfield').focus();
         $('#datefield').focus();             
});

Espérons que cette aide!

OriginalL'auteur Vijay

0

Pour la plupart des cas, les réponses ci-dessus devrait fonctionner, mais si finalement anythose réponses ain fonctionne pas pour vous, pourriez essayer cela aussi:
```
$('.datepicker').change(function () {
        $(this).focus();
        $(this).blur();
    });
```
Idée principale de ce script est à force de validations par "définition" et après "décharger" le focus. Je comprends que ce serait semblable à émuler les événements normaux qui permettent d'exécuter des validations.

Bonne chance!

OriginalL'auteur Davhec

  $('[name="StartDate"]').datepicker({
weekStart: 1,
autoclose: true,
todayHighlight: true
}).on('changeDate', function (selected) {
if ($('[name="StartDate"]').val() == '' || typeof 
$('[name="StartDate"]').val() == "undefined") {                
$('[name="EndDate"]').val('').datepicker('setStartDate', null);                
}
else {
$('[name="EndDate"]').val('').datepicker('setDate', new Date());
$('[name="EndDate"]').datepicker('setStartDate', null);
startDate = new Date(selected.date.valueOf());
startDate.setDate(startDate.getDate(new Date(selected.date.valueOf())));
$('[name="EndDate"]').datepicker('setDate', startDate);
$('[name="EndDate"]').datepicker('setStartDate', startDate);
$('[name="EndDate"]').val('').datepicker('update', '');
}
});
$('[name="StartDate"]').blur(function (selected) {
if ($('[name="EndDate"]').val() != '' && $('[name="StartDate"]').val() == '' || typeof $('[name="StartDate"]').val() == "undefined") {                
$('[name="StartDate"]').datepicker('setDate', new Date());
$('[name="StartDate"]').val('').datepicker('setStartDate', null);
$('[name="EndDate"]').datepicker('setDate', new Date());
$('[name="EndDate"]').val('').datepicker('setStartDate', null);
}
});
$("#datepicker2").datepicker({
autoclose: true,
todayHighlight: true
}).datepicker();

Aey, l'esprit de l'ajout de certains description.. Voir Comment dois-je écrire une bonne réponse, Accueil à Débordement de Pile !

OriginalL'auteur Manoj Kumar

Vous devez vous connecter pour publier un commentaire.