web-dev-qa-db-fra.com

Comment limiter les plages de dates sélectionnables dans Bootstrap Datepicker?

Je dois utiliser datepicker qui me donne la possibilité de limiter les dates sélectionnables. Nous utilisions jQuery UI, qui est utilisé pour le prendre en charge à l’aide des options minDate, maxDate. 

$("#id_date").datepicker({minDate: +1, maxDate: '+1M +10D'});

Récemment, nous avons commencé à utiliser Twitter Bootstrap pour nos styles. Et apparemment, Twitter Bootstrap est incompatible avec les styles d’interface utilisateur jQuery. J'ai donc essayé d'utiliser l'un des datepickers compatibles avec bootstrap disponibles sur http://www.eyecon.ro/bootstrap-datepicker/ . 

Malheureusement, le plugin ci-dessus n'est pas aussi configurable que le datepicker de jQuery UI. Quelqu'un peut-il m'aider à restreindre les plages de dates sélectionnables dans le nouveau sélecteur de date.

javascripttwitter-bootstrapdatepickerbootstrap-datepicker
44
Alagappan Ramu

Le sélecteur de date Bootstrap est capable de définir une plage de dates. Mais il n’est pas disponible dans la version initiale/Master Branch. Vérifiez la branche en tant que "plage" (ou voyez simplement à l'adresse https://github.com/eternicode/bootstrap-datepicker ), vous pouvez le faire simplement avec startDate et endDate.

Exemple:

$('#datepicker').datepicker({
    startDate: '-2m',
    endDate: '+2d'
});
91
Danny

Avec des plages de dates sélectionnables, vous voudrez peut-être utiliser quelque chose comme ceci. Ma solution empêche de sélectionner #from_date supérieure à #to_date et modifie #to_date startDate chaque fois que l'utilisateur sélectionne une nouvelle date dans la zone #from_date: 

http://bootply.com/74352

Fichier JS:

var startDate = new Date('01/01/2012');
var FromEndDate = new Date();
var ToEndDate = new Date();

ToEndDate.setDate(ToEndDate.getDate()+365);

$('.from_date').datepicker({

    weekStart: 1,
    startDate: '01/01/2012',
    endDate: FromEndDate, 
    autoclose: true
})
    .on('changeDate', function(selected){
        startDate = new Date(selected.date.valueOf());
        startDate.setDate(startDate.getDate(new Date(selected.date.valueOf())));
        $('.to_date').datepicker('setStartDate', startDate);
    }); 
$('.to_date')
    .datepicker({

        weekStart: 1,
        startDate: startDate,
        endDate: ToEndDate,
        autoclose: true
    })
    .on('changeDate', function(selected){
        FromEndDate = new Date(selected.date.valueOf());
        FromEndDate.setDate(FromEndDate.getDate(new Date(selected.date.valueOf())));
        $('.from_date').datepicker('setEndDate', FromEndDate);
    });

HTML: 

<input class="from_date" placeholder="Select start date" contenteditable="false" type="text">
<input class="to_date" placeholder="Select end date" contenteditable="false" type="text"

Et n'oubliez pas d'inclure également les fichiers d'amorçage datepicker.js et .css. 

44
user2586273

L'exemple ci-dessus peut être simplifié un peu. De plus, vous pouvez entrer la date manuellement à l'aide du clavier au lieu de la sélectionner uniquement avec Datepicker. Lorsque vous effacez la valeur, vous devez également gérer 'on clearDate' action pour supprimer les limites startDate/endDate:

Fichier JS:

$(".from_date").datepicker({
    format: 'yyyy-mm-dd',
    autoclose: true,
}).on('changeDate', function (selected) {
    var startDate = new Date(selected.date.valueOf());
    $('.to_date').datepicker('setStartDate', startDate);
}).on('clearDate', function (selected) {
    $('.to_date').datepicker('setStartDate', null);
});

$(".to_date").datepicker({
    format: 'yyyy-mm-dd',
    autoclose: true,
}).on('changeDate', function (selected) {
    var endDate = new Date(selected.date.valueOf());
    $('.from_date').datepicker('setEndDate', endDate);
}).on('clearDate', function (selected) {
    $('.from_date').datepicker('setEndDate', null);
});

HTML:

<input class="from_date" placeholder="Select start date" type="text" name="from_date">
<input class="to_date" placeholder="Select end date" type="text" name="to_date">
39
Marek

La plupart des réponses et explications ne doivent pas expliquer ce qu'est une chaîne valide de endDate ou startDate. Danny nous a donné deux exemples utiles.

$('#datepicker').datepicker({
    startDate: '-2m',
    endDate: '+2d'
});

Mais examinons le code source au bootstrap-datetimepicker.js..__ Il y a des lignes de code de début de ligne 1343 qui nous indiquent comment ça marche.

if (/^[-+]\d+[dmwy]([\s,]+[-+]\d+[dmwy])*$/.test(date)) {
            var part_re = /([-+]\d+)([dmwy])/,
                parts = date.match(/([-+]\d+)([dmwy])/g),
                part, dir;
            date = new Date();
            for (var i = 0; i < parts.length; i++) {
                part = part_re.exec(parts[i]);
                dir = parseInt(part[1]);
                switch (part[2]) {
                    case 'd':
                        date.setUTCDate(date.getUTCDate() + dir);
                        break;
                    case 'm':
                        date = Datetimepicker.prototype.moveMonth.call(Datetimepicker.prototype, date, dir);
                        break;
                    case 'w':
                        date.setUTCDate(date.getUTCDate() + dir * 7);
                        break;
                    case 'y':
                        date = Datetimepicker.prototype.moveYear.call(Datetimepicker.prototype, date, dir);
                        break;
                }
            }
            return UTCDate(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate(), date.getUTCHours(), date.getUTCMinutes(), date.getUTCSeconds(), 0);
        }

Il existe quatre types d'expressions.

  • w signifie semaine
  • m signifie mois
  • y signifie année
  • d signifie jour

Examinez l'expression régulière ^[-+]\d+[dmwy]([\s,]+[-+]\d+[dmwy])*$. Vous pouvez faire plus que ces -0d ou +1m.

Essayez plus fort comme startDate:'+1y,-2m,+0d,-1w'. Et le séparateur , pourrait être l'un des [\f\n\r\t\v,]

14
FavorMylikes

Une autre possibilité consiste à utiliser les options avec les attributs data, comme ceci (date minimale une semaine avant):

<input class='datepicker' data-date-start-date="-1w">

Plus d'infos: http://bootstrap-datepicker.readthedocs.io/en/latest/options.html

1
overallduka

j'utilise v3.1.3 et je devais utiliser data('DateTimePicker') comme ceci

var fromE = $( "#" + fromInput );
var toE = $( "#" + toInput );
$('.form-datepicker').datetimepicker(dtOpts);

$('.form-datepicker').on('change', function(e){
   var isTo = $(this).attr('name') === 'to';

   $( "#" + ( isTo ? fromInput : toInput  ) )
      .data('DateTimePicker')[ isTo ? 'setMaxDate' : 'setMinDate' ](moment($(this).val(), 'DD/MM/YYYY'))
});
0
bresleveloper