ejemplos - Jquery UI datepicker. Inhabilitar matriz de fechas

datepicker php

Question

He estado tratando de buscar una solución a mi problema Jquery ui datepicker y no estoy teniendo suerte. Esto es lo que estoy tratando de hacer ...

Tengo una aplicación en la que estoy haciendo PHP complejo para devolver una matriz JSON de fechas que quiero BLOQUEAR fuera de Jquery UI Datepicker. Estoy devolviendo esta matriz:

["2013-03-14","2013-03-15","2013-03-16"]

¿No hay una manera simple de decir simplemente: bloquear estas fechas del datepicker?

He leído la documentación de UI y no veo nada que me ayude. ¿Alguien tiene alguna idea?

Answer 1

IE 8 no tiene la función indexOf, así que usé jQuery inArray en su lugar.

$(''input'').datepicker({
    beforeShowDay: function(date){
        var string = jQuery.datepicker.formatDate(''yy-mm-dd'', date);
        return [$.inArray(string, array) == -1];
    }
});

Answer 2

Para DD-MM-YY use este código:

var array = ["03-03-2017 '', ''03 -10-2017'', ''03 -25-2017"]

$(''#datepicker'').datepicker({
    beforeShowDay: function(date){
    var string = jQuery.datepicker.formatDate(''dd-mm-yy'', date);
    return [ array.indexOf(string) == -1 ]
    }
});

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

Answer 3

Puedes usar beforeShowDay para hacer esto

El siguiente ejemplo deshabilita las fechas del 14 de marzo de 2013 al 16 de marzo de 2013

var array = ["2013-03-14","2013-03-15","2013-03-16"]

$(''input'').datepicker({
    beforeShowDay: function(date){
        var string = jQuery.datepicker.formatDate(''yy-mm-dd'', date);
        return [ array.indexOf(string) == -1 ]
    }
});

Demostración: Fiddle

Answer 4

Si desea deshabilitar una (s) fecha (s) particular (es) en jquery datepicker, aquí está la demostración simple para usted.

<script type="text/javascript">
    var arrDisabledDates = {};
    arrDisabledDates[new Date("08/28/2017")] = new Date("08/28/2017");
    arrDisabledDates[new Date("12/23/2017")] = new Date("12/23/2017");
    $(".datepicker").datepicker({
        dateFormat: "dd/mm/yy",
        beforeShowDay: function (date) {
            var day = date.getDay(),
                    bDisable = arrDisabledDates[date];
            if (bDisable)
                return [false, "", ""]
        }
    });
</script>

Answer 5

Si también quiere bloquear los domingos (u otros días), así como el conjunto de fechas, uso este código:

jQuery(function($){

 var disabledDays = [
 "27-4-2016", "25-12-2016", "26-12-2016",
 "4-4-2017", "5-4-2017", "6-4-2017", "6-4-2016", "7-4-2017", "8-4-2017", "9-4-2017"
];
//replace these with the id''s of your datepickers
$("#id-of-first-datepicker,#id-of-second-datepicker").datepicker({
    beforeShowDay: function(date){
    var day = date.getDay();
    var string = jQuery.datepicker.formatDate(''d-m-yy'', date);
    var isDisabled = ($.inArray(string, disabledDays) != -1);
//day != 0 disables all Sundays
return [day != 0 && !isDisabled];

}});
});   

Answer 6

beforeShowDate no funcionó para mí, así que seguí adelante y desarrollé mi propia solución:

$(''#embeded_calendar'').datepicker({
               minDate: date,
                localToday:datePlusOne,
               changeDate: true,
               changeMonth: true,
               changeYear: true,
               yearRange: "-120:+1",
               onSelect: function(selectedDateFormatted){

                     var selectedDate = $("#embeded_calendar").datepicker(''getDate'');

                    deactivateDates(selectedDate);
                   }

           });


              var excludedDates = [ "10-20-2017","10-21-2016", "11-21-2016"];

              deactivateDates(new Date());

            function deactivateDates(selectedDate){
                setTimeout(function(){ 
                      var thisMonthExcludedDates = thisMonthDates(selectedDate);
                      thisMonthExcludedDates = getDaysfromDate(thisMonthExcludedDates);
                       var excludedTDs = page.find(''td[data-handler="selectDay"]'').filter(function(){
                           return $.inArray( $(this).text(), thisMonthExcludedDates) >= 0
                       });

                       excludedTDs.unbind(''click'').addClass(''ui-datepicker-unselectable'');
                   }, 10);
            }

            function thisMonthDates(date){
              return $.grep( excludedDates, function( n){
                var dateParts = n.split("-");
                return dateParts[0] == date.getMonth() + 1  && dateParts[2] == date.getYear() + 1900;
            });
            }

            function getDaysfromDate(datesArray){
                  return  $.map( datesArray, function( n){
                    return n.split("-")[1]; 
                });
             }

Answer 7

$(''input'').datepicker({
   beforeShowDay: function(date){
       var string = jQuery.datepicker.formatDate(''yy-mm-dd'', date);
       return [ array.indexOf(string) == -1 ]
   }
});