Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [jQuery UI] Zmiana tła dni w kalendarzu. Plugin Datepicker
Forum PHP.pl > Forum > Po stronie przeglądarki
Darekxp
Witam!

Robię prosty system zaznaczania zarezerwowanych dni pokojów w małym pensjonacie z użyciem pluginu Datepicker jQuery UI.

Czy jest możliwość wstawienia dni np w formie ["2012-09-12", "2012-09-13", "2012-09-23", "2012-10-16"....] i zmiany ich tła (komórki dnia) np na kolor czerwony ? Dane te by były pobierane z bazy danych.

PS. W jakie znaczniki wstwiać kod JS na forum, żeby był czytelny?

fragment podstony pokoje.tpl
  1. $(function() {
  2. $( "#datepicker" ).datepicker();
  3. });
  4. <p>Sprawdź dostępność: <input type="text" id="datepicker"></p>


calendar.js

  1. jQuery(function($){
  2. $.datepicker.regional['pl'] = {
  3. closeText: 'Zamknij',
  4. prevText: 'Poprzedni;',
  5. nextText: 'Następny',
  6. currentText: 'Dziś',
  7. monthNames: ['Styczeń','Luty','Marzec','Kwiecień','Maj','Czerwiec',
  8. 'Lipiec','Sierpień','Wrzesień','Październik','Listopad','Grudzień'],
  9. monthNamesShort: ['Sty','Lu','Mar','Kw','Maj','Cze',
  10. 'Lip','Sie','Wrz','Pa','Lis','Gru'],
  11. dayNames: ['Niedziela','Poniedzialek','Wtorek','Środa','Czwartek','Piątek','Sobota'],
  12. dayNamesShort: ['Nie','Pn','Wt','Śr','Czw','Pt','So'],
  13. dayNamesMin: ['N','Pn','Wt','Śr','Cz','Pt','So'],
  14. weekHeader: 'Tydz',
  15. dateFormat: 'yy-mm-dd',
  16. firstDay: 1,
  17. isRTL: false,
  18. showMonthAfterYear: false,
  19. yearSuffix: ''};
  20. $.datepicker.setDefaults($.datepicker.regional['pl']);
  21. });
  22.  
  23. $(function() {
  24. $("#datepicker").datepicker({ dateFormat:"yy-mm-dd", nextText: " &raquo;", prevText: "&laquo; ", minDate: new Date(), maxDate: "+2m" });
  25. $.datepicker.setDefaults($.datepicker.regional['pl']);
  26. });
grzes999
Musisz użyć funkcji beforeShow. Żeby zaznaczyć daty w kalendarzu. A kolor to później w css możesz sobie zmienić.

Fragment kodu

[JAVASCRIPT] pobierz, plaintext
  1. $('.selector').datepicker({
  2. beforeShow: function(input, inst) { ... }
  3. });
[JAVASCRIPT] pobierz, plaintext


więcej o beforeShow w dziale events
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.