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

avec des plages de dates sélectionnables, vous pourriez vouloir utiliser quelque chose comme ça. Ma solution empêche de sélectionner #from_date plus grand que #to_date et modifie #to_date startDate à chaque fois que l'utilisateur sélectionne une nouvelle date dans la boîte # 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 bootstrap datepicker.js et .les fichiers css aswell.

L'exemple ci-dessus peut être simplifier un peu. En outre, vous pouvez mettre la date manuellement à partir du clavier au lieu de la sélectionner via le lecteur de données seulement. Lorsque vous effacez la valeur, vous devez gérer aussi "sur l'clearDate' action pour supprimer date de début/date de fin limite:

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">

la plupart des réponses et des explications ne sont pas pour expliquer ce qui est une chaîne valide de endDate ou startDate. Danny nous a donné deux exemples utiles.

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

Mais pourquoi?regardons le code source à bootstrap-datetimepicker.js. Il y a un début de code ligne 1343 dites-nous comment cela fonctionne.

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 s'entend de la semaine
• m signifie " mois
• y moyen année
• d signifie jour

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

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

une Autre possibilité est d'utiliser les options data attributs, comme ceci(date minimum 1 semaine avant):

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

je suis à l'aide de la v3.1.3 et j'ai dû 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'))
});