jquery - ocultar - ¿Limitar bootprap-datepicker a días laborables solamente?

limitar datepicker jquery

Question

¿Hay alguna forma de permitir solo las selecciones de día de la semana en el selector de fecha de arranque encontrado a continuación? https://github.com/eternicode/bootstrap-datepicker/

Estoy creando una instancia del selector de fecha de esta manera:

$(''#datepicker'').datepicker();

/* Update datepicker plugin so that MM/DD/YYYY format is used. */
$.extend($.fn.datepicker.defaults, {
    parse: function (string) {
        var matches;
        if ((matches = string.match(/^(/d{2,2})//(/d{2,2})//(/d{4,4})$/))) {
            return new Date(matches[3], matches[1] - 1, matches[2]);
        } else {
            return null;
        }
    },
    format: function (date) {
        var
        month = (date.getMonth() + 1).toString(),
        dom = date.getDate().toString();
        if (month.length === 1) {
            month = "0" + month;
        }
        if (dom.length === 1) {
            dom = "0" + dom;
        }
        return month + "/" + dom + "/" + date.getFullYear();
    }
});  

Gracias por cualquier ayuda.

Answer 1

** ACTUALIZACIÓN **

Bootstrap datepicker ahora tiene una opción daysOfWeekDisabled . Ver la respuesta de @ fin a continuación.

** ANTIGUA RESPUESTA **

Aquí hay una demostración de trabajo.

Suponiendo que tus semanas comiencen el domingo:

$(function() {
    function disableWeekends($this) {
        var $days = $this.find(''.datepicker-days tr'').each(function() {
            var $days = $(this).find(''.day'');
            $days.eq(0).addClass(''old'').click(false); //Sunday
            $days.eq(6).addClass(''old'').click(false); //Saturday
        });

    }

    $(''#dp1'').datepicker({
        format: ''mm-dd-yyyy''
    });

    // get instance of the jQuery object created by
    // datepicker    
    var datepicker = $(''#dp1'').data(''datepicker'').picker;

    // disable weekends in the pre-rendered version
    disableWeekends(datepicker);

    // disable weekends whenever the month changes
    var _fill = datepicker.fill;
    datepicker.fill = function() {
        _fill.call(this);
        disableWeekends(this.picker);
    };

});​

Si no, simplemente cambie $ days.eq (...) a los índices correctos.

Por supuesto, esto solo cubre el evento de clic y te lleva en la dirección correcta. Estoy bastante seguro de que otras cosas, como la navegación con el teclado, deben abordarse.

EDITAR

Para la última versión use este código donde sea apropiado

// get instance of the jQuery object created by datepicker    
var datepicker = $(''#dp1'').data(''datepicker'');

// disable weekends in the pre-rendered version
disableWeekends(datepicker.picker);

// disable weekends whenever the month changes
var _fill = datepicker.fill;
datepicker.fill = function() {{
    _fill.call(this);
    disableWeekends(datepicker.picker);
}};

Answer 2

La última versión de https://github.com/eternicode/bootstrap-datepicker ya tiene una opción para deshabilitar la selección de días de la semana en particular. De los documentos :

daysOfWeekDisabled

Cuerda, Array. Defecto: '''', []

Días de la semana que deben ser desactivados. Los valores son 0 (domingo) a 6 (sábado). Los valores múltiples deben estar separados por comas. Ejemplo: deshabilitar los fines de semana: ''0,6'' o [0,6] .

En otras palabras, simplemente cree una instancia de su selector de fechas de esta manera:

$(''#datepicker'').datepicker({
    daysOfWeekDisabled: [0,6]
});

Aquí hay un jsfiddle que demuestra esto: http://jsfiddle.net/vj77M/1/

Answer 3

También puedes probarlo.

onRender: function(date) {
    return date.getDay() == 0 || date.getDay() == 6 ? ''disabled'' : '''';
}

Espero que ayude a alguien. :)

Answer 4

$(document).ready(function(){


var date_input=$(''input[name="date"]''); 

var container=$(''.bootstrap-iso form'').length>0 ? $(''.bootstrap-iso form'').parent() : "body";

date_input.datepicker({


format: ''dd/mm/yyyy'',

container: container,

weekStart: 0,

daysOfWeekDisabled: "0,1,2,3,4,5",

daysOfWeekHighlighted: "6",

todayHighlight: true,

autoclose: true,


})

})