¿Cómo restringir los intervalos de fechas seleccionables en Bootstrap Datepicker?

Question

Necesito usar datepicker, que me da la opción de restringir las fechas seleccionables. Hemos estado utilizando la interfaz de usuario de jQuery, que se usa para admitirlo utilizando las opciones minDate, maxDate.

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

Recientemente comenzamos a utilizar Twitter Bootstrap para nuestros estilos. Y aparentemente, Twitter Bootstrap es incompatible con los estilos de interfaz de usuario de jQuery. Así que traté de usar uno de los datapickers compatibles con bootstrap disponibles en el http://www.eyecon.ro/bootstrap-datepicker/.

Desafortunadamente, el complemento anterior no es tan configurable como el marcador de fechas de jQuery UI. ¿Alguien puede ayudarme con la restricción de los intervalos de fechas seleccionables en el nuevo selector de fecha?

Answer 1

El marcador de fechas de Bootstrap puede establecer el intervalo de fechas. Pero no está disponible en el lanzamiento inicial/Rama principal. Compruebe la rama como 'rango' allí (o simplemente vea en https://github.com/eternicode/bootstrap-datepicker), puede hacerlo simplemente con startDate y endDate.

Ejemplo:

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

Answer 2

Con fecha seleccionable rangos es posible que desee usar algo como esto. Mi solución evita la selección #from_date más grande que #to_date y cambios #to_date startDate cada vez que el usuario selecciona una nueva fecha en el cuadro de #from_date:

http://bootply.com/74352

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

Y no se olvide de incluir archivos bootstrap datepicker.js y .css.

Answer 3

El ejemplo anterior se puede simplificar un poco. Además, puede poner la fecha manualmente desde el teclado en lugar de seleccionarla solo a través del selector de fecha. Al quitar el valor que se necesita para manejar también 'en clearDate' medidas para eliminar startDate/endDate límite:

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

Answer 4

mayoría de las respuestas y explicaciones no son para explicar qué es una cadena válida de endDate o startDate. Danny nos dio dos ejemplos útiles.

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

Pero por qué? Vamos a echar un vistazo al código fuente en bootstrap-datetimepicker.js. Hay algún código que comience la línea 1343 díganos cómo funciona.

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

Existen cuatro tipos de expresiones.

• w significa semanas
• m significa mes
• y significa años
• d significa día

Mire la expresión regular ^[-+]\d+[dmwy]([\s,]+[-+]\d+[dmwy])*$. Puede hacer más que estos -0d o +1m.

Trate difícil como startDate:'+1y,-2m,+0d,-1w' .Y el separador , podría ser uno de [\f\n\r\t\v,]

Answer 5

estoy usando v3.1.3 y tuve que usar data('DateTimePicker') como esto

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

Otra posibilidad es utilizar las opciones con data atributos, como esto (fecha mínima 1 semana antes):

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

Más información: http://bootstrap-datepicker.readthedocs.io/en/latest/options.html