Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript][PHP]Datepicker - Aktywacja tygodnia wg daty
Forum PHP.pl > Forum > Przedszkole
rafik73
Witam
Jak zrobić taki efekt?
Klikam w element (np. textbox), który zawiera datę w formacie 2016-12-28
Przykładowa podana data to środa.
Chcę, by po kliknięciu otworzył się kalendarzyk (datepicker), w którym aktywne
są tylko dni od poniedziałku do piątku które zawierają tą datę.
Kalendarzyk ma nie mieć możliwości zmiany miesiąca i roku (to potrafię).

trueblue
Znajdź datepicker z możliwością podania zakresu możliwych dat. Zakres ten ustawisz na podstawie określonej daty (albo przy inicjalizacji/otwieraniu datepickera w JS, albo w PHP wdrukowując parametry przy inicjalizacji).
rafik73
Takie cóś znalazłem

http://jsfiddle.net/yXMKC/4/
Niree
Datepickerrange, zainteresuj się tym :-)
rafik73
Jak zmienne:

[JAVASCRIPT] pobierz, plaintext
  1. var a="2016-12-15";
  2. var b="2016-12-18";
  3. var c="2016-12-21";
[JAVASCRIPT] pobierz, plaintext


podstawić do zmiennej availableDates ?

tak działa:

[JAVASCRIPT] pobierz, plaintext
  1. var availableDates = ["2016-12-15","2016-12-18","2016-12-21"];
[JAVASCRIPT] pobierz, plaintext


tak nie:

[JAVASCRIPT] pobierz, plaintext
  1. var availableDates = [a,b,c];
[JAVASCRIPT] pobierz, plaintext


zmienna podstawiana do funkcji:


[JAVASCRIPT] pobierz, plaintext
  1. beforeShowDay: function (date) {
  2. dmy = date.getFullYear() + "-" + (date.getMonth()+1) + "-" + date.getDate();
  3.  
  4. if ($.inArray(dmy, availableDates) != -1) {
  5. return [true, "","dostępne"];
  6. } else {
  7. return [false,"","niedostępne"];
  8. }
[JAVASCRIPT] pobierz, plaintext


Zmienne a,b,c pobieram z inputa w formacie daty , np: 2016-12-15
trueblue
Czy zmienne a, b, c są widoczne w miejscu gdzie deklarujesz zmienną availableDates? Jeśli nie, to zadeklarowałeś je poza zasięgiem tego fragmentu skryptu.
W jakim momencie inicjujesz skrypt datepickera, czy nie wcześniej niż zmienną availableDates?
rafik73
[JAVASCRIPT] pobierz, plaintext
  1. $(function(){
  2.  
  3. $(document).on("click",".oz_m_data",function(){
  4.  
  5. var a = $(this).val();
  6.  
  7. var b = "2016-12-18";
  8. alert(a);
  9. // var availableDates = ["2016-12-9","2016-12-14","2016-12-15"];
  10. var availableDates = new Array;
  11. availableDates[0] = a;
  12. availableDates[1] = b;
  13.  
  14. $('.oz_m_data').datepicker({
  15. inline: true,
  16. //showOtherMonths: true,
  17. //selectOtherMonths: true,
  18. changeMonth: true,
  19. changeYear: true,
  20. showButtonPanel: true,
  21. //beforeShowDay: function(date){ return [date.getDay() == 0,""]}
  22.  
  23.  
  24. beforeShowDay: function (date) {
  25. dmy = date.getFullYear() + "-" + (date.getMonth()+1) + "-" + date.getDate();
  26.  
  27. if ($.inArray(dmy, availableDates) != -1) {
  28. return [true, "","dostępne"];
  29. } else {
  30. return [false,"","niedostępne"];
  31. }
  32.  
  33. }
  34. ,
  35. onSelect: function() {}
  36.  
  37. });
  38. });
  39. });
[JAVASCRIPT] pobierz, plaintext



zmienna b (dzień 18) działa ok, zmienna a (dzień 16) na pół gwizdka, tzn. wyświetla ją aktywną ale nie podświetloną jak zmienna b

trueblue
Wyjmij tworzenie datepickera z obsługi zdarzenia click.
Zainicjuj go przed tą funkcją, a w obsłudze click użyj: https://api.jqueryui.com/datepicker/#method-option
rafik73
O to ci chodziło :

$( ".oz_m_data" ).datepicker( "option" );

trueblue
Nie.
O to abyś ustawiał opcję availableDates za pomocą tej metody.
rafik73
Ni w ząb nie mogę tego ugryźć

Próbuję tak:

$( ".oz_m_data" ).datepicker( "option" , availableDates);

i nic
trueblue
Teraz widzę, że availableDates nie jest opcją, ale jest wykorzystywana w funkcji beforeShowDay.

Niemniej:

  1. $(function() {
  2.  
  3.  
  4. $('.oz_m_data').datepicker({
  5. inline: true,
  6. //showOtherMonths: true,
  7. //selectOtherMonths: true,
  8. changeMonth: true,
  9. changeYear: true,
  10. showButtonPanel: true,
  11. //beforeShowDay: function(date){ return [date.getDay() == 0,""]}
  12.  
  13.  
  14. beforeShowDay: function(date) {
  15. dmy = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
  16.  
  17. var a = $('.oz_m_data').val();
  18.  
  19. var b = "2016-12-18";
  20. alert(a);
  21. // var availableDates = ["2016-12-9","2016-12-14","2016-12-15"];
  22. var availableDates = new Array;
  23. availableDates[0] = a;
  24. availableDates[1] = b;
  25.  
  26. if ($.inArray(dmy, availableDates) != -1) {
  27. return [true, "", "dostępne"];
  28. } else {
  29. return [false, "", "niedostępne"];
  30. }
  31.  
  32. },
  33. onSelect: function() {}
  34.  
  35. });
  36.  
  37.  
  38. });
rafik73
nalazłem takie rozwiązanie:

[JAVASCRIPT] pobierz, plaintext
  1. $(function() {
  2. $(".oz_m_data").click(function() {
  3. $(this).datepicker().datepicker( "show" )
  4. });
  5. });
[JAVASCRIPT] pobierz, plaintext


łańcuszek

[JAVASCRIPT] pobierz, plaintext
  1. .datepicker( "show" )
[JAVASCRIPT] pobierz, plaintext


zdecydowanie rozszerzył możliwości operowania zmiennymi.
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.