Wie schränkt man die wählbaren Datumsbereiche in Bootstrap Datepicker ein?

Question

Ich muss Datepicker verwenden, was mir die Möglichkeit bietet, die auswählbaren Daten zu beschränken. Wir hatten jQuery UI verwendet, das verwendet wird, um es mit den Optionen minDate und maxDate zu unterstützen.

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

Seit kurzem verwenden wir Twitter Bootstrap für unsere Stile. Und anscheinend ist Twitter Bootstrap nicht kompatibel mit jQuery UI-Stilen. Also habe ich versucht, einen der Bootstrap-kompatiblen Datepicker zu verwenden, die unter http://www.eyecon.ro/bootstrap-datepicker/ verfügbar sind.

Leider ist das obige Plugin nicht so konfigurierbar wie der Datumsauswahl von jQuery UI. Kann mir jemand helfen, die auswählbaren Datumsbereiche im neuen Datepicker einzuschränken.

Answer 1

Der Bootstrap Datepicker kann den Datumsbereich einstellen. Aber es ist nicht verfügbar in der ersten Version/Master Branch. Überprüfen Sie den Zweig als 'Bereich' (oder sehen Sie einfach unter https://github.com/eternicode/bootstrap-datepicker), können Sie es einfach mit StartDate und EndDate tun.

Beispiel:

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

Answer 2

Mit wählbarem Datum reicht man so etwas verwenden möchte. Meine Lösung verhindert #from_date die Auswahl größer als #to_date und Änderungen #to_date startdate jedes Mal, wenn Benutzer neue Datum in #from_date Box wählt:

http://bootply.com/74352

JS-Datei:

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" 

Und vergessen Sie nicht, bootstrap datepicker.js und .css Dateien auch einzuschließen.

Answer 3

Das obige Beispiel kann ein bisschen vereinfachen. Außerdem können Sie das Datum manuell über die Tastatur eingeben, anstatt es nur über den Datapicker auszuwählen. Wenn der Wert Clearing müssen Sie auch Aktion 'auf clearDate' zu handstartdate/endDate Grenze zu entfernen:

JS-Datei:

$(".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"> 

Answer 4

Die meisten Antworten und Erklärungen sind nicht zu erklären, was eine gültige Zeichenfolge von endDate oder startDate ist. Danny gab uns zwei nützliche Beispiele.

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

Aber warum? Lassen Sie uns auf den Quellcode zu bootstrap-datetimepicker.js einen Blick. Es gibt einige Code beginnen Linie 1343 sagen Sie uns, wie es funktioniert.

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

Es gibt vier Arten von Ausdrücken.

• w bedeutet Woche
• m Monate bedeutet
• y bedeutet Jahr
• d bedeutet Tag

Blick auf den regulären Ausdruck ^[-+]\d+[dmwy]([\s,]+[-+]\d+[dmwy])*$. Sie können mehr als diese -0d oder +1m tun.

Versuch stark wie startDate:'+1y,-2m,+0d,-1w' .Und der Separator , einem der [\f\n\r\t\v,]

Answer 5

i v3.1.3 bin mit sein könnte und ich hatte data('DateTimePicker') wie diese

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

Answer 6

Eine weitere Möglichkeit, die Optionen zu verwenden, ist die Verwendung mit data Attribute, wie dieser (mindestens Datum 1 Woche vorher):

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

Weitere Informationen: http://bootstrap-datepicker.readthedocs.io/en/latest/options.html