Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> jQuery UI Datepicker - nieaktywne daty
htk
post
Post #1





Grupa: Zarejestrowani
Postów: 14
Pomógł: 0
Dołączył: 8.07.2011

Ostrzeżenie: (0%)
-----

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!
Go to the top of the page
+Quote Post
skowron-line
post
Post #2





Grupa: Zarejestrowani
Postów: 4 340
Pomógł: 542
Dołączył: 15.01.2006
Skąd: Olsztyn/Warszawa

Ostrzeżenie: (0%)
-----

http://davidwalsh.name/jquery-datepicker-disable-days
Go to the top of the page
+Quote Post
htk
post
Post #3





Grupa: Zarejestrowani
Postów: 14
Pomógł: 0
Dołączył: 8.07.2011

Ostrzeżenie: (0%)
-----

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.
Go to the top of the page
+Quote Post
skowron-line
post
Post #4





Grupa: Zarejestrowani
Postów: 4 340
Pomógł: 542
Dołączył: 15.01.2006
Skąd: Olsztyn/Warszawa

Ostrzeżenie: (0%)
-----

Do zrozumienia tego potrzeba jest minimalna znajomość JS i języka angielskiego.
Go to the top of the page
+Quote Post
htk
post
Post #5





Grupa: Zarejestrowani
Postów: 14
Pomógł: 0
Dołączył: 8.07.2011

Ostrzeżenie: (0%)
-----

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


Ten post edytował htk 9.11.2011, 15:54:07
Go to the top of the page
+Quote Post
skowron-line
post
Post #6





Grupa: Zarejestrowani
Postów: 4 340
Pomógł: 542
Dołączył: 15.01.2006
Skąd: Olsztyn/Warszawa

Ostrzeżenie: (0%)
-----

A konsola błędów coś pokazuje (IMG:style_emoticons/default/questionmark.gif)
Go to the top of the page
+Quote Post
htk
post
Post #7





Grupa: Zarejestrowani
Postów: 14
Pomógł: 0
Dołączył: 8.07.2011

Ostrzeżenie: (0%)
-----

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) {
Go to the top of the page
+Quote Post
skowron-line
post
Post #8





Grupa: Zarejestrowani
Postów: 4 340
Pomógł: 542
Dołączył: 15.01.2006
Skąd: Olsztyn/Warszawa

Ostrzeżenie: (0%)
-----

To co wkleiłeś powinno CI powiedzieć wszystko. Czy potrzeba translatora żeby zrozumieć błędy (IMG:style_emoticons/default/questionmark.gif)
http://translate.google.pl/#en|pl|is%20not%20defined
http://translate.google.pl/#en|pl|is%20not%20a%20function
Go to the top of the page
+Quote Post
htk
post
Post #9





Grupa: Zarejestrowani
Postów: 14
Pomógł: 0
Dołączył: 8.07.2011

Ostrzeżenie: (0%)
-----

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.

Ten post edytował htk 9.11.2011, 21:04:31
Go to the top of the page
+Quote Post
Kostek.88
post
Post #10





Grupa: Zarejestrowani
Postów: 376
Pomógł: 47
Dołączył: 23.08.2007
Skąd: Warszawa

Ostrzeżenie: (0%)
-----

A co masz teraz dokladnie? Jaki kod?
Go to the top of the page
+Quote Post
htk
post
Post #11





Grupa: Zarejestrowani
Postów: 14
Pomógł: 0
Dołączył: 8.07.2011

Ostrzeżenie: (0%)
-----

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


Ten post edytował htk 14.11.2011, 15:35:53
Go to the top of the page
+Quote Post
« Następny starszy · JavaScript · Następny nowszy »
 

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 25.09.2025 - 18:27
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn