Come limitare gli intervalli di date selezionabili in Bootstrap Datepicker?

Question

Ho bisogno di usare datepicker che mi fornisce l'opzione di limitare le date selezionabili. Stavamo usando l'interfaccia utente di jQuery che viene utilizzata per supportarla utilizzando le opzioni minDate, maxDate.

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

Recentemente abbiamo iniziato a utilizzare Twitter Bootstrap per i nostri stili. E a quanto pare, Twitter Bootstrap è incompatibile con gli stili dell'interfaccia utente jQuery. Così ho provato a utilizzare uno dei datepicker compatibili con il bootstrap disponibili allo http://www.eyecon.ro/bootstrap-datepicker/.

Sfortunatamente, il plug-in di cui sopra non è configurabile come datepicker di jQuery UI. Qualcuno può aiutarmi a limitare gli intervalli di date selezionabili nel nuovo Datepicker.

Answer 1

Il Bootstrap datepicker è in grado di impostare l'intervallo di date. Ma non è disponibile nella versione iniziale/Master Branch. Controlla il ramo come 'intervallo' lì (o guarda semplicemente a https://github.com/eternicode/bootstrap-datepicker), puoi farlo semplicemente con startDate e endDate.

Esempio:

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

Answer 2

Con data selezionabile gamme si potrebbe desiderare di usare qualcosa di simile. La mia soluzione impedisce la selezione #from_date più grande di #to_date e cambiamenti #to_date startDate ogni volta quando l'utente seleziona nuova data in scatola #from_date:

http://bootply.com/74352

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

E non dimenticare di includere anche i file bootstrap datepicker.js e .css.

Answer 3

L'esempio sopra può essere semplificato un po '. Inoltre puoi mettere la data manualmente dalla tastiera invece di selezionarla solo con datepicker. Quando si sgombra il valore è necessario gestire anche 'sul clearDate' azione per rimuovere startDate/endDate confine:

JS di file:

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

La maggior parte delle risposte e spiegazioni non devono spiegare cos'è una stringa valida di endDate o startDate. Danny ci ha fornito due esempi utili.

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

Ma perché? Diamo un'occhiata al codice sorgente a bootstrap-datetimepicker.js. Ci sono alcuni codici che iniziano la riga 1343 dicci come funziona.

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

Esistono quattro tipi di espressioni.

• w significa settimana
• m significa mese
• y significa anno
• d significa giorno

Guardate l'espressione regolare ^[-+]\d+[dmwy]([\s,]+[-+]\d+[dmwy])*$. Puoi fare più di questi -0d o +1m.

Prova difficile come startDate:'+1y,-2m,+0d,-1w' .E il separatore , potrebbe essere uno dei [\f\n\r\t\v,]

Answer 5

sto usando v3.1.3 e ho dovuto usare data('DateTimePicker') come questo

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

Un'altra possibilità è quella di utilizzare le opzioni con data attributi, come questo (termine minimo di 1 settimana prima):

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

Altre informazioni: http://bootstrap-datepicker.readthedocs.io/en/latest/options.html