Markieren Sie Datumsangaben in der Jquery UI-Datumsauswahl

Schauen Sie sich die Dokumentation an. 

beforeShowDay Die Funktion nimmt ein Datum als Parameter und muss ein Array mit [0] gleich true/false zurückgeben, das angibt, ob dieses Datum ausgewählt werden kann oder nicht, [1] einem CSS-Klassennamen oder ' 'für die Standardpräsentation und [2] eine optionale Popup-QuickInfo für dieses Datum. Es wird für jeden Tag im Datepicker aufgerufen, bevor es angezeigt wird.

Das bedeutet, dass Sie eine Funktion erstellen müssen, die ein Datum annimmt und ein Array von Parametern zurückgibt, deren Werte folgende sind:

1. boolean - Gibt an, ob das Datum ausgewählt werden kann
2. string - Name der CSS-Klasse, die auf das Datum angewendet wird
3. string - ein optionaler Popup-Tooltip für dieses Datum

hier ist ein Beispiel:

var your_dates = [new Date(2011, 7, 7),new Date(2011, 7, 8)]; // just some dates.

$('#whatever').datepicker({
   beforeShowDay: function(date) {
      // check if date is in your array of dates
      if($.inArray(date, your_dates)) {
         // if it is return the following.
         return [true, 'css-class-to-highlight', 'tooltip text'];
      } else {
         // default
         return [true, '', ''];
      }
   }
});

jetzt können Sie den Stil hinzufügen, um das Datum hervorzuheben

<style>
   .css-class-to-highlight{
       background-color: #ff0;
   }
</style>

Die am meisten gewählte Antwort funktionierte nicht. Der Code wurde ein wenig aktualisiert, damit er funktioniert. $ .inArray () sucht meistens nach indexOf (). Außerdem können wir zwei Termine nicht direkt auf Gleichheit vergleichen. Referenz: Zwei Daten mit JavaScript vergleichen

function inArrayDates(needle, haystack){
    var found = 0;
    for (var i=0, len=haystack.length;i<len;i++) {
        if (haystack[i].getTime() == needle.getTime()) return i;
            found++;
        }
    return -1;
}

Und aktualisieren Sie die akzeptierte Funktion als 

if(inArrayDates(date, markDates) != -1) {
            return [true, 'selected-highlight', 'tooltip here'];
          } else {
             return [true, '', ''];
          }

Datumsangaben in JS sind Instanzen des Objekts Date. Sie können also nicht anhand von == oder === überprüfen, ob Datumsangaben gleich sind.

Einfache Lösung:

var your_dates = [
   new Date(2017, 4, 25),
   new Date(2017, 4, 23)
];

$( "#some_selector" ).datepicker({
    beforeShowDay: function(date) {
        are_dates_equal = d => d.getTime() === date.getTime();
        if(your_dates.some(are_dates_equal)) {
            return [true, 'ui-state-active', ''];
        }
        return [true, '', ''];
    }
})

http://jqueryui.com/demos/datepicker/#event-beforeShowDay

Sie vergleichen den date-Parameter in beforeShowDay mit den Datumsangaben, die Sie in Ihrem Array erhalten haben. Wenn eine Übereinstimmung vorliegt, geben Sie ein Array zurück, wie in der Verknüpfung oben definiert.

In dem Array, das Sie von beforeShowDay zurückgeben, wird mit dem zweiten Element der Klassenname festgelegt, der am Datum verwendet wird. Sie können dann mit css Stile für diese Klasse festlegen.

Ich habe eine einfache Lösung gefunden, bei der wir nur die Daten angeben müssen, die deaktiviert werden sollen, und die verfügbaren Daten in Farbe anzeigen müssen. Und es hat bei mir funktioniert

   <style>
    .availabledate a {
         background-color: #07ea69 !important;
         background-image :none !important;
         color: #ffffff !important;
     }
     </style>

Und für das Skript verwenden Sie dies:

<script>

    $(function() {
        //This array containes all the disabled array
          datesToBeDisabled = ["2019-03-25", "2019-03-28"];

            $("#datepicker").datepicker({
              changeMonth: true,
              changeYear: true,
              minDate : 0,
              todayHighlight: 1,
              beforeShowDay: function (date) {
                var dateStr = jQuery.datepicker.formatDate('yy-mm-dd', date);
                if(dateStr){
                  return [datesToBeDisabled.indexOf(dateStr) == -1,"availabledate"];
                }else{
                  return [datesToBeDisabled.indexOf(dateStr) == -1,""];
                }

              },

            });


    });

  </script>

Hoffe es kann jemandem helfen.