Jquery UI Datepicker. Array von Daten deaktivieren

84

Ich habe versucht, nach einer Lösung für mein Jquery UI Datepicker-Problem zu suchen, und ich habe kein Glück. Folgendes versuche ich zu tun ...

Ich habe eine Anwendung, in der ich ein komplexes PHP mache, um ein JSON-Array von Daten zurückzugeben, die ich aus dem Jquery UI Datepicker BLOCKIEREN möchte. Ich gebe dieses Array zurück:

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

Gibt es nicht eine einfache Möglichkeit, einfach zu sagen: Blockieren Sie diese Daten vom Datepicker?

Ich habe die UI-Dokumentation gelesen und sehe nichts, was mir hilft. Hat jemand irgendwelche Ideen?

Daniel White
quelle

Antworten:

206

Sie können beforeShowDay verwenden , um dies zu tun

Im folgenden Beispiel werden die Daten vom 14. März 2013 bis 16. März 2013 deaktiviert

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: Geige

Arun P Johny
quelle
1
Ich weiß, wohin du damit gehst. Wie würde ich meine Datenreihe einbinden?
Daniel White
14
BEEINDRUCKEND. Du bist ein verdammt genialer Bruder. Ich weiß nicht, warum dies nicht bereits in den Stapelüberlauf-Posts für diese Frage enthalten ist, da sie millionenfach gestellt wurde. Alle oben aufgeführten Beispiele sind zu kompliziert, das ist schön und einfach. 5 Sterne. Vielen Dank.
Daniel White
Ich habe den Code jqueryui.com/download/… heruntergeladen, aber wenn ich den obigen Code in ihn integriere, funktioniert es nicht. Bitte helfen Sie
Sam
Eine Gegenstimme reicht nicht aus. Manche Leute machen die Dinge viel komplizierter als nötig. Vielen Dank für ein einfaches, funktionierendes Snippet. Sehr hilfreich.
0112
4
Wenn Sie neben diesen benutzerdefinierten Daten auch Wochenenden ausschließen möchten, ersetzen Sie die Rückleitung durch folgende:return array.indexOf(string) != -1 ? [false] : $.datepicker.noWeekends(date);
Pablo SG Pacheco
20

IE 8 hat keine indexOf-Funktion, daher habe ich stattdessen jQuery inArray verwendet.

$('input').datepicker({
    beforeShowDay: function(date){
        var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
        return [$.inArray(string, array) == -1];
    }
});
Tripex
quelle
6
@ChristopherStrydom Sie wären überrascht, wie viele Leute es noch benutzen.
Euther
3
Dies liegt daran, dass IE8 der neueste IE-Browser ist, der unter WinXP (SP3) ausgeführt wird.
JosephK
Es unterstützt jedoch die Funktion indexOf () für eine Zeichenfolge, um die Position eines Teilstrings in dieser Zeichenfolge zu ermitteln.
Wezy
9

Wenn Sie auch Sonntage (oder andere Tage) sowie die Anzahl der Daten blockieren möchten, verwende ich diesen Code:

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];
      }
   });
});   
Es ist Magie
quelle
1
$('input').datepicker({
   beforeShowDay: function(date){
       var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
       return [ array.indexOf(string) == -1 ]
   }
});
user38156
quelle
1

beforeShowDate hat bei mir nicht funktioniert, also habe ich meine eigene Lösung entwickelt:

$('#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]; 
                });
             }
Roberto Rodriguez
quelle
Können wir dasselbe bei dateRangePicker tun?
Sunil Rawat
1

Verwenden Sie für TT-MM-JJ diesen Code:

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, ''];
}
Dierig Patrick
quelle
Ist es für daterangepicker möglich, ich möchte eine Reihe von Daten auf Datumsbereichsauswahl deaktivieren?
Sunil Rawat
Können Sie bitte Ihre Frage definieren?
Dierig Patrick
Ich habe Datumsbereichsauswahl angenommen: 01/01/2017 - 31/03/2017. Ich möchte einige Daten und eine Reihe von benutzerdefinierten Datumsangaben zwischen diesem Bereich hervorheben. im Datumsbereich Kalender. $ Termine = ['02 /01/2017','03/01/2017'...bis] diese Daten. ist möglich
Sunil Rawat
Wie in Datepicker können wir verwenden: beforeShowDay-Funktion für diesen Zweck, was gibt es in Date-Range-Picker: daterangepicker.com
Sunil Rawat
1

Wenn Sie bestimmte Daten in jquery datepicker deaktivieren möchten, finden Sie hier die einfache Demo.

<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>
Vimal Patel
quelle