javascript - futuros - Cómo restringir los intervalos de fechas seleccionables en Bootstrap Datepicker?

deshabilitar dias futuros en 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 usar 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 http://www.eyecon.ro/bootstrap-datepicker/ .

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

Answer 1

Bootstrap datepicker puede configurar el rango 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 intervalos de fechas seleccionables, es posible que desee usar algo como esto. Mi solución impide seleccionar #from_date mayor que #to_date y cambia #to_date startDate cada vez que el usuario selecciona una nueva fecha en el cuadro #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 los 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 borrar el valor, debe manejar también la acción ''on clearDate'' para eliminar el límite startDate / endDate:

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

Estoy usando v3.1.3 y tuve que usar data(''DateTimePicker'') como este

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 5

La 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é? Echemos 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);
        }

Hay cuatro tipos de expresiones.

• w significa semana
• m significa mes
• y significa año
• d significa día

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

Intenta más como startDate:''+1y,-2m,+0d,-1w'' . Y el separador , podría ser uno de [/f/n/r/t/v,]

Answer 6

Otra posibilidad es usar las opciones con atributos de data , como este (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