Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: jQuery UI Datepicker - nieaktywne daty
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
htk
9.11.2011, 12:24:23
Witam,

korzystam w tworzonym serwisie ze skryptu Datepicker. Wszystko działa sprawnie, lecz potrzebuję zrobić z kalendarzem coś, czego nie znalazłem w dokumentacji. Otóż, chcę by niektóre daty były nieaktywne (niemożliwe do wybrania). Przykładowo: rozwijam kalendarz i mam listopad, ale np. między 24-28 listopada potrzebuję by data była nieaktywna, tzn. nie można wybrać daty z tego zakresu (między 24 a 28 listopadem).
Proszę o pomoc w tej sprawie, w razie pytań jestem do dyspozycji.

Pozdrawiam!
skowron-line
9.11.2011, 12:34:43
http://davidwalsh.name/jquery-datepicker-disable-days
htk
9.11.2011, 14:42:46
Mam z tym pewien problem. Nawet nie wiem na czym dokładnie polega. W skrócie - skopiowałem cały skrypt z powyższego linku i kalendarz się w ogóle nie wyświetla.
skowron-line
9.11.2011, 14:52:40
Do zrozumienia tego potrzeba jest minimalna znajomość JS i języka angielskiego.
htk
9.11.2011, 15:53:19
Proszę zatem o pomoc w realizacji tej opcji w moim kodzie.
Załączone mam następujące pliki:
[HTML] pobierz, plaintext 
  1. <script type="text/javascript"> var $j = jQuery.noConflict(); </script>
  2. <script type="text/javascript" src="scripts/jquery-1.4.3.js"></script>
  3. <script type="text/javascript" src="scripts/jquery-ui.min.js"></script>
[HTML] pobierz, plaintext


Dalej mam:
[HTML] pobierz, plaintext 
  1.       <script type="text/javascript">
  2.   	jQuery(document).ready(function() {
  3.     		jQuery("#kamper_data1").datepicker();
  4.     		jQuery("#kamper_data2").datepicker();
  5.   	});
  6.  
  7. 	jQuery(function($){
  8. 	        $.datepicker.regional['pl'] = {
  9. 	                closeText: 'Zamknij',
  10. 	                prevText: '<Poprzedni',
  11. 	                nextText: 'Następny>',
  12. 	                currentText: 'Dziś',
  13. 	                monthNames: ['Styczeń','Luty','Marzec','Kwiecień','Maj','Czerwiec',
  14. 	                'Lipiec','Sierpień','Wrzesień','Październik','Listopad','Grudzień'],
  15. 	                monthNamesShort: ['Sty','Lu','Mar','Kw','Maj','Cze',
  16. 	                'Lip','Sie','Wrz','Pa','Lis','Gru'],
  17. 	                dayNames: ['Niedziela','Poniedziałek','Wtorek','Środa','Czwartek','Piątek','Sobota'],
  18. 	                dayNamesShort: ['Nie','Pn','Wt','Śr','Czw','Pt','So'],
  19. 	                dayNamesMin: ['N','Pn','Wt','Śr','Cz','Pt','So'],
  20. 	                weekHeader: 'Tydz',
  21. 	                dateFormat: 'yy-mm-dd',
  22. 	                minDate: 0,
  23. 	                firstDay: 1,
  24. 	                isRTL: false,
  25. 	                showMonthAfterYear: false,
  26. 	                yearSuffix: ''};
  27. 	        $.datepicker.setDefaults($.datepicker.regional['pl']);
  28. 	});
  29.       </script>
[HTML] pobierz, plaintext



Próbowałem to zrobić w następujący sposób, ale nic z tego:
[HTML] pobierz, plaintext 
  1.       <script type="text/javascript">
  2.       	var disabledDays = ["10-11-2011","15-11-2011"];
  3.  
  4. 	function nationalDays(date) {
  5. 	  var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();
  6. 	  for (i = 0; i < disabledDays.length; i++) {
  7. 	    if($.inArray((m+1) + '-' + d + '-' + y,disabledDays) != -1 || new Date() > date) {
  8. 	      return [false];
  9. 	    }
  10. 	  }
  11. 	  return [true];
  12. 	}
  13. 	function noWeekendsOrHolidays(date) {
  14. 	  var noWeekend = jQuery.datepicker.noWeekends(date);
  15. 	  return noWeekend[0] ? nationalDays(date) : noWeekend;
  16. 	}
  17.  
  18.   	jQuery(document).ready(function() {
  19.     		jQuery("#kamper_data1").datepicker();
  20.     		jQuery("#kamper_data2").datepicker();
  21.   	});
  22.  
  23. 	jQuery(function($){
  24. 	        $.datepicker.regional['pl'] = {
  25. 	                closeText: 'Zamknij',
  26. 	                prevText: '<Poprzedni',
  27. 	                nextText: 'Następny>',
  28. 	                currentText: 'Dziś',
  29. 	                monthNames: ['Styczeń','Luty','Marzec','Kwiecień','Maj','Czerwiec',
  30. 	                'Lipiec','Sierpień','Wrzesień','Październik','Listopad','Grudzień'],
  31. 	                monthNamesShort: ['Sty','Lu','Mar','Kw','Maj','Cze',
  32. 	                'Lip','Sie','Wrz','Pa','Lis','Gru'],
  33. 	                dayNames: ['Niedziela','Poniedziałek','Wtorek','Środa','Czwartek','Piątek','Sobota'],
  34. 	                dayNamesShort: ['Nie','Pn','Wt','Śr','Czw','Pt','So'],
  35. 	                dayNamesMin: ['N','Pn','Wt','Śr','Cz','Pt','So'],
  36. 	                weekHeader: 'Tydz',
  37. 	                dateFormat: 'yy-mm-dd',
  38. 	                minDate: 0,
  39. 	                firstDay: 1,
  40. 	                isRTL: false,
  41. 	                showMonthAfterYear: false,
  42. 	                constrainInput: true,
  43. 	                beforeShowDay: noWeekendsOrHolidays,
  44. 	                yearSuffix: ''};
  45. 	        $.datepicker.setDefaults($.datepicker.regional['pl']);
  46. 	});
  47.       </script>
[HTML] pobierz, plaintext
skowron-line
9.11.2011, 19:41:20
A konsola błędów coś pokazuje questionmark.gif
htk
9.11.2011, 20:15:41
Kod
jQuery is not defined
<script type="text/javascript"> var $j = jQuery.noConflict(); </script>
Line 18

$.inArray is not a function
Line 35
if($.inArray((m+1) + '-' + d + '-...dDays) != -1 || new Date() > date) {
skowron-line
9.11.2011, 20:19:16
To co wkleiłeś powinno CI powiedzieć wszystko. Czy potrzeba translatora żeby zrozumieć błędy questionmark.gif
http://translate.google.pl/#en|pl|is%20not%20defined
http://translate.google.pl/#en|pl|is%20not%20a%20function
htk
9.11.2011, 21:04:12
Poprawione. Kalendarz się już wysuwa, jednak w ogóle nie reaguje na zmianę var disabledDays. Zawsze nieaktywne są dwie kolumny kalendarza, licząc od prawej.
Kostek.88
9.11.2011, 21:10:07
A co masz teraz dokladnie? Jaki kod?
htk
14.11.2011, 15:35:07
Kod
      <script type="text/javascript">
          var disabledDays = ["2011-11-10","2011-11-15"];
          
    function nationalDays(date) {
      var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();
      //console.log('Checking (raw): ' + m + '-' + d + '-' + y);
      for (i = 0; i < disabledDays.length; i++) {
        if(jQuery.inArray((m+1) + '-' + d + '-' + y,disabledDays) != -1 || new Date() > date) {
          //console.log('bad:  ' + (m+1) + '-' + d + '-' + y + ' / ' + disabledDays[i]);
          return [false];
        }
      }
      //console.log('good:  ' + (m+1) + '-' + d + '-' + y);
      return [true];
    }
    function noWeekendsOrHolidays(date) {
      var noWeekend = jQuery.datepicker.noWeekends(date);
      return noWeekend[0] ? nationalDays(date) : noWeekend;
    }

      jQuery(document).ready(function() {
            jQuery("#kamper_data1").datepicker();
            jQuery("#kamper_data2").datepicker();
      });
    
    jQuery(function($){
            $.datepicker.regional['pl'] = {
                    closeText: 'Zamknij',
                    prevText: '&#x3c;Poprzedni',
                    nextText: 'Następny&#x3e;',
                    currentText: 'Dziś',
                    monthNames: ['Styczeń','Luty','Marzec','Kwiecień','Maj','Czerwiec',
                    'Lipiec','Sierpień','Wrzesień','Październik','Listopad','Grudzień'],
                    monthNamesShort: ['Sty','Lu','Mar','Kw','Maj','Cze',
                    'Lip','Sie','Wrz','Pa','Lis','Gru'],
                    dayNames: ['Niedziela','Poniedziałek','Wtorek','Środa','Czwartek','Piątek','Sobota'],
                    dayNamesShort: ['Nie','Pn','Wt','Śr','Czw','Pt','So'],
                    dayNamesMin: ['N','Pn','Wt','Śr','Cz','Pt','So'],
                    weekHeader: 'Tydz',
                    dateFormat: 'yy-mm-dd',
                    minDate: 0,
                    firstDay: 1,
                    isRTL: false,
                    showMonthAfterYear: false,
                    constrainInput: true,
                    beforeShowDay: noWeekendsOrHolidays,
                    yearSuffix: ''};
            $.datepicker.setDefaults($.datepicker.regional['pl']);
    });
      </script>


Dwie kolumny kalendarza od prawej są nieaktywne niezależnie od tego co wpiszę w
Kod
var disabledDays = [];
. Jeśli wpiszę tam jakieś daty, np:
Kod
var disabledDays = ["11-24-2011"];
- wówczas nieaktywna robi się data 24 listopada 2011 (to właśnie chce osiągnąć), ale oprócz tego nieaktywna robi się dzisiejsza data i jak wspomniałem na początku - dwie kolumny od prawej również są nieaktywne.






Dobra, zrobiłem - działa. Dla zainteresowanych podaję kod:
[HTML] pobierz, plaintext 
  1.       <script type="text/javascript">
  2.       	var disabledDays = ["11-24-2011", "11-20-2011"];
  3.  
  4. 	function nationalDays(date) {
  5. 	  var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();
  6. 	  //console.log('Checking (raw): ' + m + '-' + d + '-' + y);
  7. 	  for (i = 0; i < disabledDays.length; i++) {
  8. 	    if(jQuery.inArray((m+1) + '-' + d + '-' + y,disabledDays) != -1) {
  9. 	      //console.log('bad:  ' + (m+1) + '-' + d + '-' + y + ' / ' + disabledDays[i]);
  10. 	      return [false];
  11. 	    }
  12. 	  }
  13. 	  //console.log('good:  ' + (m+1) + '-' + d + '-' + y);
  14. 	  return [true];
  15. 	}
  16. 	function noWeekendsOrHolidays(date) {
  17. 	  var noWeekend = jQuery.datepicker.noWeekends(date);
  18. 	  return nationalDays(date);
  19. 	}
  20.  
  21.   	jQuery(document).ready(function() {
  22.     		jQuery("#kamper_data1").datepicker();
  23.     		jQuery("#kamper_data2").datepicker();
  24.   	});
  25.  
  26. 	jQuery(function($){
  27. 	        $.datepicker.regional['pl'] = {
  28. 	                closeText: 'Zamknij',
  29. 	                prevText: '&#x3c;Poprzedni',
  30. 	                nextText: 'Następny&#x3e;',
  31. 	                currentText: 'Dziś',
  32. 	                monthNames: ['Styczeń','Luty','Marzec','Kwiecień','Maj','Czerwiec',
  33. 	                'Lipiec','Sierpień','Wrzesień','Październik','Listopad','Grudzień'],
  34. 	                monthNamesShort: ['Sty','Lu','Mar','Kw','Maj','Cze',
  35. 	                'Lip','Sie','Wrz','Pa','Lis','Gru'],
  36. 	                dayNames: ['Niedziela','Poniedziałek','Wtorek','Środa','Czwartek','Piątek','Sobota'],
  37. 	                dayNamesShort: ['Nie','Pn','Wt','Śr','Czw','Pt','So'],
  38. 	                dayNamesMin: ['N','Pn','Wt','Śr','Cz','Pt','So'],
  39. 	                weekHeader: 'Tydz',
  40. 	                dateFormat: 'yy-mm-dd',
  41. 	                minDate: 0,
  42. 	                firstDay: 1,
  43. 	                isRTL: false,
  44. 	                showMonthAfterYear: false,
  45. 	                constrainInput: true,
  46. 	                beforeShowDay: noWeekendsOrHolidays,
  47. 	                yearSuffix: ''};
  48. 	        $.datepicker.setDefaults($.datepicker.regional['pl']);
  49. 	});
  50.       </script>
[HTML] pobierz, plaintext
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.