web-dev-qa-db-fra.com

Plusieurs dates dans le sélecteur de date Bootstrap

J'essaie de sélectionner plusieurs dates dans Boostrap-Datepicker.

J'ai initialisé le sélecteur de date en tant que tel, très bien.

$('#datepicker2').datepicker();

Maintenant, je veux sélectionnez plusieurs dates sur le calendrier:

$('#datepicker2').datepicker('setDate', [new Date(2014, 2, 5),new Date(2014, 3, 5)]);

Ça ne fonctionne pas. Aucune erreur n'est enregistrée mais les dates ne sont pas sélectionnées.

EDIT: la version datepicker que j'ai utilisée présentait un problème avec multidates, j'ai utilisé une version précédente et cela fonctionne - probablement un problème de version

_ {Cela fonctionne très bien, cependant) :

$('#datepicker2').datepicker('setDate', new Date(2014, 2, 5));
jquerytwitter-bootstrapdatepicker
7
Nik Kyriakides

Il est nécessaire de définir d’abord votre sélecteur de date en tant que sélecteur multidates à travers les options.

$('#datepicker2').datepicker({
  multidate: true
});

Ensuite, vous pouvez définir vos dates via la méthode setDates:

$('.date').datepicker({
    multidate: true
});

$('.date').datepicker('setDates', [new Date(2014, 2, 5), new Date(2014, 3, 5)])
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.css" rel="stylesheet"/>
<input type="text" class="form-control date"/>

15
AJ Gregory

Vous pouvez également définir une limite pour le nombre de dates à sélectionner. Voir l'exemple ci-dessous, vous ne pourrez sélectionner que 5 dates maximum.

Exemple 

$("#Txt_Date").datepicker({
    format: 'd-M-yyyy',
    inline: false,
    lang: 'en',
    step: 5,
    multidate: 5,
    closeOnDateSelect: true
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.css" rel="stylesheet"/>


<input type="text" id="Txt_Date" placeholder="Choose Date" style="cursor: pointer;">

1
Manish Nayak