Podświetl daty w jquery UI datepicker

Question

Jak mogę użyć beforeShowDay do podświetlania dni w jQuery UI datepicker. Mam dnia następującego tablicę

Array 
(
    [0] => 2011-07-07 
    [1] => 2011-07-08 
    [2] => 2011-07-09 
    [3] => 2011-07-10 
    [4] => 2011-07-11 
    [5] => 2011-07-12 
    [6] => 2011-07-13 
) 

Answer 1

I rozwiązać problem przy użyciu

var disabledDays = ["2011-7-21","2011-7-24","2011-7-27","2011-7-28"]; 
var date = new Date(); 
jQuery(document).ready(function() { 
    $("#dateselector").datepicker({ 
     dateFormat: 'yy-mm-dd', 
     beforeShowDay: function(date) { 
      var m = date.getMonth(), d = date.getDate(), y = date.getFullYear(); 
      for (i = 0; i < disabledDays.length; i++) { 
       if($.inArray(y + '-' + (m+1) + '-' + d,disabledDays) != -1) { 
        //return [false]; 
        return [true, 'ui-state-active', '']; 
       } 
      } 
      return [true]; 

     } 
    }); 
}); 

Answer 2

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

porównać parametru data w beforeShowDay z datami masz w swojej tablicy, a jeśli nie jest to mecz wrócisz tablicę, jak określono w link powyżej.

W tablicy, z której powracasz przed opcjąShowDay, drugi element służy do ustawienia nazwy klasy, która będzie używana w dniu, możesz wtedy użyć css do ustawienia stylów dla tej klasy.

Answer 3

Zapoznaj się z dokumentacją.

beforeShowDay Funkcja przyjmuje datę jako parametr i nie może powrócić tablicę [0] równa prawda/fałsz wskazującą, czy termin ten jest do wyboru, [1] równa nazwą klasy CSS (e) lub "" dla domyślnej prezentacji, oraz [2] opcjonalne wyskakujące okienko narzędziowe dla tej daty. Jest wywoływana dla każdego dnia w datepicker, zanim zostanie wyświetlona.

To oznacza, że ​​trzeba utworzyć funkcję, która będzie miała datę i zwraca tablicę parametrów, których wartości są:

1. logiczna - wskazuje, czy data może być wybrany
2. ciąg - nazwa klasy css, który będzie aplikowany do dnia
3. String - opcjonalnej podpowiedzi kontekstowe tej dacie

tutaj jest exa MPle:

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

a teraz można dodać styl, aby podświetlić datę

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

Answer 4

Znaleziono najbardziej głosowało odpowiedź nie działa. Zaktualizowano trochę kod, aby działał. $ .inArray() najczęściej szuka indexOf(). Również nie możemy porównać dwóch dat bezpośrednio dla równości. referencyjny: Compare two dates with JavaScript

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

i aktualizować przyjętej funkcję

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

Answer 5

Daty w JS są instancjami obiektu Date, więc nie można sprawdzić, czy prawidłowo terminy są równe użyciu == lub ===.

Proste rozwiązanie:

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