webentwicklung-frage-antwort-db.com.de

Wie beschränke ich die auswählbaren Datumsbereiche in Bootstrap Datepicker?

Ich muss datepicker verwenden, was mir die Möglichkeit gibt, die auswählbaren Daten einzuschränken. Wir hatten die jQuery-Benutzeroberfläche verwendet, die zur Unterstützung mit den Optionen minDate und maxDate verwendet wird. 

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

Vor kurzem haben wir begonnen, Twitter Bootstrap für unsere Styles zu verwenden. Und anscheinend ist Twitter Bootstrap nicht mit jQuery-UI-Styles kompatibel. Also habe ich versucht, einen der mit Bootstrap kompatiblen Datepicker unter http://www.eyecon.ro/bootstrap-datepicker/ zu verwenden. 

Leider ist das obige Plugin nicht so konfigurierbar wie der Datepicker der jQuery-Benutzeroberfläche. Kann mir jemand bei der Einschränkung der auswählbaren Datumsbereiche im neuen Datepicker helfen?.

44
Alagappan Ramu

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

Beispiel:

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

Bei wählbaren Datumsbereichen möchten Sie möglicherweise etwas davon verwenden. Meine Lösung verhindert, dass #from_date größer als #to_date ausgewählt wird, und ändert sich #to_date startDate jedes Mal, wenn der Benutzer ein neues Datum im Feld #from_date auswä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" 

Vergessen Sie nicht, bootstrap datepicker.js und .css-Dateien mit einzuschließen. 

44
user2586273

Das obige Beispiel kann etwas vereinfacht werden. Außerdem können Sie das Datum manuell über die Tastatur eingeben, anstatt es nur über datepicker auszuwählen. Wenn Sie den Wert löschen, müssen Sie auch mit 'on clearDate' action umgehen, um die startDate/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">
39
Marek

Die meisten Antworten und Erklärungen sollen nicht 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? Lasst uns einen Blick auf den Quellcode unter bootstrap-datetimepicker.js..__ werfen. Es gibt einige Codeanfangszeile 1343, die uns sagt, 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 bedeutet Monat
  • y bedeutet Jahr
  • d bedeutet Tag

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

Versuchen Sie es härter wie startDate:'+1y,-2m,+0d,-1w' und das Trennzeichen , könnte [\f\n\r\t\v,] sein.

14
FavorMylikes

Eine andere Möglichkeit besteht darin, die Optionen mit data-Attributen wie folgt zu verwenden (Mindestdatum vor 1 Woche):

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

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

1
overallduka

ich verwende v3.1.3 und musste data('DateTimePicker') so verwenden

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