Selector de fecha de Jquery UI. Deshabilitar la matriz de fechas


84

He estado tratando de buscar una solución a mi problema de Jquery ui datepicker y no tengo 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 forma sencilla de decir simplemente: bloquear estas fechas del selector de fechas?

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






¿Alguien puede indicarme preguntas similares pero usando Materialise datepicker?
naz786

Respuestas:


208

Puede usar beforeShowDay para hacer esto

El siguiente ejemplo desactiva 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: violín


1
TENGO QUE ver a dónde vas con eso. Sin embargo, ¿cómo incorporaría mi variedad de fechas?
Daniel White

14
GUAU. Eres un maldito genio hermano. No sé por qué esto aún no está en las publicaciones de desbordamiento de pila para esta pregunta, ya que se ha preguntado un millón de veces. Todos los ejemplos publicados anteriormente son demasiado complicados, esto es agradable y simple. 5 estrellas. Gracias.
Daniel White

He descargado el código jqueryui.com/download/ ... pero cuando estoy integrando el código anterior no funciona, por favor ayuda
Sam

Un voto a favor no es suficiente. Algunas personas hacen las cosas mucho más complicadas de lo necesario. Muchas gracias por un fragmento sencillo y funcional. Muy útil.
0112

4
Si también desea excluir los fines de semana además de estas fechas personalizadas, reemplace la línea de retorno por esta:return array.indexOf(string) != -1 ? [false] : $.datepicker.noWeekends(date);
Pablo SG Pacheco

20

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

6
@ChristopherStrydom, te sorprendería saber cuánta gente todavía lo usa.
euther

3
Esto se debe a que IE8 es el navegador IE más nuevo que se ejecutará en WinXP (SP3).
JosephK

Sin embargo, admite la función indexOf () en una cadena para encontrar la posición de una subcadena en esa cadena.
Wezy

9

Si también desea 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];
      }
   });
});   

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

1

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

¿Podemos hacer lo mismo en dateRangePicker?
Sunil Rawat

1

Para DD-MM-AA 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, ''];
}

¿Es posible para daterangepicker, quiero deshabilitar una matriz de fechas en date-range-picker?
Sunil Rawat

¿Puede definir su pregunta?
Dierig Patrick

Supongo que tengo un selector de rango de fechas: 01/01/2017 - 31/03/2017. Quiero resaltar algunas fechas y una variedad de fechas personalizadas entre este rango. en el calendario de rango de fechas. $ fechas = ['02 / 01/2017','03/01/2017'...hasta] estas fechas. es posible?
Sunil Rawat

como en datepicker podemos usar: beforeShowDay function para este propósito, ¿qué hay en date-range-picker: daterangepicker.com
Sunil Rawat

1

Si desea deshabilitar fechas particulares 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>
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.