Aquí, quiero a lograr los siguientes

  1. Resaltar todos los días festivos en el selector de fecha
  2. Deshabilitar los días específicos en el selector de fecha
  3. Deshabilitar específica los fines de semana en el selector de fecha

He fragmentos de cada uno por separado, pero quiero que todos juntos

Violín:Demo

Resaltar vacaciones

var holydays = ['10/17/2013', '10/18/2013', '11/2/2013'];

function highlightDays(date) {
    for (var i = 0; i < holydays.length; i++) {
        if (new Date(holydays[i]).toString() == date.toString()) {
            return [true, 'highlight'];
        }
    }
    return [true, ''];

}

$(function () {
    $("#dp").datepicker({
        minDate: 0,
        dateFormat: 'mm/dd/yy',
        inline: true,
        numberOfMonths: [1, 2],
        dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
        beforeShowDay: highlightDays,
    });
});

Deshabilitar días específicos

var disabledDays = ["10-20-2013", "10-21-2013", "11-15-2013", "11-17-2013"];
    function disableAllTheseDays(date) {
        var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();
        for (i = 0; i < disabledDays.length; i++) {
            if($.inArray((m+1) + '-' + d + '-' + y,disabledDays) != -1) {
                return [false];
            }
        }
        return [true];
    }

Deshabilitar Los Fines De Semana

$(function() {
        $( "#availability" ).datepicker({
            minDate: 0,
            dateFormat: 'mm/dd/yy',
            inline: true,
            numberOfMonths: [1, 2],
            dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
            beforeShowDay: $.datepicker.noWeekends
        });
    });

Podría alguien ayudarme..

Gracias de antemano.

4 Comentarios

  1. 4

    cambio :

    $(function () {
        $("#dp").datepicker({
            minDate: 0,
            dateFormat: 'mm/dd/yy',
            inline: true,
            numberOfMonths: [1, 2],
            dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
            beforeShowDay: setCustomDate //<-----change function
        });
    });

    agregar función :

    function setCustomDate(date) {
        var clazz = "";
        var arr1 = highlightDays(date);
        if (arr1[1] != "") clazz = arr1[1];
    
        var arr2 = disableAllTheseDays(date);
        var arr3 = $.datepicker.noWeekends(date);
    
        return [(!arr2[0] || !arr3[0]) ? false : true, clazz];
    }
  2. 2

    Ahora estamos en 2014, y un mínimo de código.
    Aquí está mi manera de deshabilitar días.

    mi variable ‘específico’ , 0 <= específicas <= 7

    in my demo :

    1 = sunday
    2 = saturday
    4 = Monday to friday

    if specific == 5 that mean 4 + 1 so i allow Monday till friday + sunday.

    7 significa que todos los días permitidos para elegir.
    observe que sólo se permiten recoger a partir de ahora a Mes + 1

    $( "#datepicker" ).datepicker({
        minDate:0,
        maxDate: '+1M-1D',
        dateFormat: "yy-mm-dd",
        beforeShowDay: function(date) {
            var day = date.getDay();
            if(day == 6)
                return [(specific & 2) > 0, ''];
            else if(day == 0)
                return [(specific & 1) > 0, ''];
            else
                return [(specific & 4) > 0, ''];
        }
    });
  3. 0

    Sólo para referencias futuras. Desde que yo estaba buscando lo mismo y encontré estas misma función para deshabilitar días en un montón de lugares diferentes:

    http://www.spiceforms.com/blog/how-to-disable-dates-in-jquery-datepicker-a-short-guide/
    https://davidwalsh.name/jquery-datepicker-disable-days

    var disabledDays = ["10-20-2013", "10-21-2013", "11-15-2013", "11-17-2013"];
        function disableAllTheseDays(date) {
            var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();
            for (i = 0; i < disabledDays.length; i++) {
                if($.inArray((m+1) + '-' + d + '-' + y,disabledDays) != -1) {
                    return [false];
                }
            }
            return [true];
        }

    Pero ya que usted está utilizando inArray, el no es necesario, lo que resulta en esto más simple y más eficiente de la función:

    var disabledDays = ["4-2-2016", "4-4-2016"];
    
    function disableAllTheseDays(date) {
         var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();
         if($.inArray((m+1) + '-' + d + '-' + y,disabledDays) != -1) return [false];
         return [true];
    }
  4. 0

    Este uno trabaja para mí. Coloca antes de cerrar la etiqueta body.

    function DisableMonday(date) {
          var day = date.getDay();
         if (day == 1) {
         return [false,"","Unavailable"] ; 
         } else { 
         return [true] ;
         } 
        }
        jQuery(function($){
            $('input[name="datum"]').datepicker('option', 'beforeShowDay', DisableMonday).datepicker('refresh');
        });

Dejar respuesta

Please enter your comment!
Please enter your name here