Datepicker dell'interfaccia utente di Jquery. Disabilita l'array di date


84

Ho provato a cercare una soluzione al mio problema con il datepicker dell'interfaccia utente di Jquery e non ho fortuna. Ecco cosa sto cercando di fare ...

Ho un'applicazione in cui sto eseguendo un PHP complesso per restituire un array JSON di date che voglio BLOCCARE dall'interfaccia utente di Jquery Datepicker. Sto restituendo questo array:

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

Non c'è un modo semplice per dire semplicemente: bloccare queste date dal datepicker?

Ho letto la documentazione dell'interfaccia utente e non vedo nulla che mi aiuti. Qualcuno ha qualche idea?






Qualcuno può segnalarmi a domande simili ma utilizzando Materialise datepicker?
naz786

Risposte:


208

Puoi usare beforeShowDay per farlo

Il seguente esempio disabilita le date dal 14 marzo 2013 al 16 marzo 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 ]
    }
});

Demo: violino


1
Ho tipo di vedere dove stai andando con quello. Come vorrei incorporare la mia gamma di date?
Daniel White

14
WOW. Sei un pazzo genio fratello. Non so perché questo non sia già nei post di overflow dello stack per questa domanda poiché è stato chiesto un milione di volte. Tutti gli esempi postati sopra sono troppo complicati, questo è carino e semplice. 5 stelle. Grazie.
Daniel White

Ho scaricato il codice jqueryui.com/download/… ma quando sto integrando il codice sopra in esso non funziona, pls help
Sam

Un voto positivo non è sufficiente. Alcune persone rendono le cose molto più complicate di quanto dovrebbero essere. Grazie mille per uno snippet semplice e funzionante. Molto utile.
0112

4
Se vuoi escludere anche i fine settimana oltre a queste date personalizzate, sostituisci la riga di ritorno con questa:return array.indexOf(string) != -1 ? [false] : $.datepicker.noWeekends(date);
Pablo SG Pacheco

20

IE 8 non ha la funzione indexOf, quindi ho usato jQuery inArray.

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

6
@ChristopherStrydom saresti sorpreso di quante persone lo usano ancora.
euther

3
Questo perché IE8 è il browser IE più recente che verrà eseguito su WinXP (SP3).
JosephK

Tuttavia, supporta la funzione indexOf () su una stringa per trovare la posizione di una sottostringa in quella stringa.
Wezy

9

Se vuoi bloccare anche la domenica (o altri giorni) così come l'array di date, io uso questo codice:

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 non ha funzionato per me, quindi sono andato avanti e ho sviluppato la mia soluzione:

$('#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]; 
                });
             }

Possiamo fare la stessa cosa su dateRangePicker ??
Sunil Rawat

1

Per GG-MM-AA usa questo codice:

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, ''];
}

È possibile per daterangepicker, voglio disabilitare un array di date su date-range-picker ??
Sunil Rawat

Puoi definire la tua domanda?
Dierig Patrick

Ho il selettore dell'intervallo di date supponiamo: 01/01/2017 - 31/03/2017. Voglio evidenziare alcune date una serie di date personalizzate tra questo intervallo. sul calendario dell'intervallo di date. $ date = ['02 /01/2017','03/01/2017'...fino a] queste date. è possibile?
Sunil Rawat

come in datepicker possiamo usare: funzione beforeShowDay per questo scopo, cosa c'è in date-range-picker: daterangepicker.com
Sunil Rawat

1

Se vuoi disabilitare una o più date particolari in jquery datepicker, ecco la semplice demo per te.

<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>
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.