[JQUERY] JQuery와 UI 날짜 선택기가 비활성화 토요일과 일요일 (공휴일)로 만들 수 있습니다?

JQuery와 UI 날짜 선택기가 비활성화 토요일과 일요일 (공휴일)로 만들 수 있습니다?

해결법

1. ---

   1.날짜가 허용 또는 false 경우 그렇지 않은 경우는 true를 돌려 각 날짜에 대해 호출 할 수있는 기능을 취하는 beforeShowDay 옵션이 있습니다. 워드 프로세서 :

   날짜가 허용 또는 false 경우 그렇지 않은 경우는 true를 돌려 각 날짜에 대해 호출 할 수있는 기능을 취하는 beforeShowDay 옵션이 있습니다. 워드 프로세서 :

   beforeShowDay

   함수는 변수로서 날짜를 받아 [0]이 날짜를 선택할 수 있고 기본 프리젠 테이션에 대한 CSS 클래스 이름 또는 '동일 1인지의 여부를 나타내는 참 / FALSE로 동일한 배열을 반환한다. 이 표시되기 전에 그것은 날짜 선택기에서 매일라고합니다.

   날짜 선택기에서 일부 공휴일을 표시합니다.

   $(".selector").datepicker({ beforeShowDay: nationalDays})   
   
   natDays = [
     [1, 26, 'au'], [2, 6, 'nz'], [3, 17, 'ie'],
     [4, 27, 'za'], [5, 25, 'ar'], [6, 6, 'se'],
     [7, 4, 'us'], [8, 17, 'id'], [9, 7, 'br'],
     [10, 1, 'cn'], [11, 22, 'lb'], [12, 12, 'ke']
   ];
   
   function nationalDays(date) {
       for (i = 0; i < natDays.length; i++) {
         if (date.getMonth() == natDays[i][0] - 1
             && date.getDate() == natDays[i][1]) {
           return [false, natDays[i][2] + '_day'];
         }
       }
     return [true, ''];
   }
   

   기능 내장 하나는, 주말의 방지 그 선택 noWeekends라는 존재.

   $(".selector").datepicker({ beforeShowDay: $.datepicker.noWeekends })
   

   두 가지를 결합하려면 있습니다 (nationalDays은 위의 기능을 가정)처럼 뭔가를 할 수 :

   $(".selector").datepicker({ beforeShowDay: noWeekendsOrHolidays})   
   
   function noWeekendsOrHolidays(date) {
       var noWeekend = $.datepicker.noWeekends(date);
       if (noWeekend[0]) {
           return nationalDays(date);
       } else {
           return noWeekend;
       }
   }
   

   업데이트 : jQuery를 UI 1.8.19로, beforeShowDay 옵션도 선택 사양 인 세 번째 paremeter, 팝업 툴팁 만 사용할 수 있습니다

2. ---

   2.당신은 주말 단순히 전혀 표시하지 않는 경우 :

   당신은 주말 단순히 전혀 표시하지 않는 경우 :

   CSS

   th.ui-datepicker-week-end,
   td.ui-datepicker-week-end {
       display: none;
   }
   

3. ---

   3.날짜 선택기이 기능을 내장하고있다!

   날짜 선택기이 기능을 내장하고있다!

   $( "#datepicker" ).datepicker({
     beforeShowDay: $.datepicker.noWeekends
   });
   

   http://api.jqueryui.com/datepicker/#utility-noWeekends

4. ---

   4.이 답변은 매우 도움이되었다. 감사합니다.

   이 답변은 매우 도움이되었다. 감사합니다.

   내 기여 아래 여러 일이 거짓을 반환 할 수 있습니다 배열을 추가합니다 (우리는 매주 화요일, 수요일과 목요일 끝났어요). 그리고 특정 날짜 플러스 년 노 주말 기능을 번들로 제공.

   당신이 주말을 원하는 경우, [토요일], [일요일]를 closedDays에 배열을 추가합니다.

   $(document).ready(function(){
   
       $("#datepicker").datepicker({
           beforeShowDay: nonWorkingDates,
           numberOfMonths: 1,
           minDate: '05/01/09',
           maxDate: '+2M',
           firstDay: 1
       });
   
       function nonWorkingDates(date){
           var day = date.getDay(), Sunday = 0, Monday = 1, Tuesday = 2, Wednesday = 3, Thursday = 4, Friday = 5, Saturday = 6;
           var closedDates = [[7, 29, 2009], [8, 25, 2010]];
           var closedDays = [[Monday], [Tuesday]];
           for (var i = 0; i < closedDays.length; i++) {
               if (day == closedDays[i][0]) {
                   return [false];
               }
   
           }
   
           for (i = 0; i < closedDates.length; i++) {
               if (date.getMonth() == closedDates[i][0] - 1 &&
               date.getDate() == closedDates[i][1] &&
               date.getFullYear() == closedDates[i][2]) {
                   return [false];
               }
           }
   
           return [true];
       }
   
   
   
   
   });
   

5. ---

   5.모두가 좋아하는 솔루션은 여기에 개인적으로 내가 이런 식으로 뭔가를 훨씬 쉽게 생각 ... 아주 강한 것 같다 :

   모두가 좋아하는 솔루션은 여기에 개인적으로 내가 이런 식으로 뭔가를 훨씬 쉽게 생각 ... 아주 강한 것 같다 :

          var holidays = ["12/24/2012", "12/25/2012", "1/1/2013", 
               "5/27/2013", "7/4/2013", "9/2/2013", "11/28/2013", 
               "11/29/2013", "12/24/2013", "12/25/2013"];
   
          $( "#requestShipDate" ).datepicker({
               beforeShowDay: function(date){
                   show = true;
                   if(date.getDay() == 0 || date.getDay() == 6){show = false;}//No Weekends
                   for (var i = 0; i < holidays.length; i++) {
                       if (new Date(holidays[i]).toString() == date.toString()) {show = false;}//No Holidays
                   }
                   var display = [show,'',(show)?'':'No Weekends or Holidays'];//With Fancy hover tooltip!
                   return display;
               }
           });
   

   이 방법은 날짜는 사람이 읽을 수 있습니다. 이것은 다른이 그냥 나에게 이런 식으로 더 의미가 정말 아니다.

6. ---

   6.코드의이 버전은 u는 SQL 데이터베이스에서 휴가 날짜를 얻을 수 있도록하고, UI 날짜 선택기에서 지정된 날짜를 사용할 수 없게됩니다

   코드의이 버전은 u는 SQL 데이터베이스에서 휴가 날짜를 얻을 수 있도록하고, UI 날짜 선택기에서 지정된 날짜를 사용할 수 없게됩니다

   
   $(document).ready(function (){
     var holiDays = (function () {
       var val = null;
       $.ajax({
           'async': false,
           'global': false,
           'url': 'getdate.php',
           'success': function (data) {
               val = data;
           }
       });
       return val;
       })();
     var natDays = holiDays.split('');
   
     function nationalDays(date) {
       var m = date.getMonth();
       var d = date.getDate();
       var y = date.getFullYear();
   
       for (var i = 0; i ‘ natDays.length-1; i++) {
       var myDate = new Date(natDays[i]);
         if ((m == (myDate.getMonth())) && (d == (myDate.getDate())) && (y == (myDate.getFullYear())))
         {
           return [false];
         }
       }
       return [true];
     }
   
     function noWeekendsOrHolidays(date) {
       var noWeekend = $.datepicker.noWeekends(date);
         if (noWeekend[0]) {
           return nationalDays(date);
         } else {
           return noWeekend;
       }
     }
     $(function() { 
       $("#shipdate").datepicker({
         minDate: 0,
         dateFormat: 'DD, d MM, yy',
         beforeShowDay: noWeekendsOrHolidays,
         showOn: 'button',
         buttonImage: 'images/calendar.gif', 
         buttonImageOnly: true
        });
     });
   });
   

   SQL에서 데이터베이스를 작성하고 대 Varchar로 MM / DD / YYYY 형식으로 날짜를 휴일 넣어 파일 getdate.php에 내용은 아래를 넣어

   
   [php]
   $sql="SELECT dates FROM holidaydates";
   $result = mysql_query($sql);
   $chkdate = $_POST['chkdate'];
   $str='';
   while($row = mysql_fetch_array($result))
   {
   $str .=$row[0].'';
   }
   echo $str;
   [/php]
   

   코딩 해피 !!!! :-)

7. ---

   7.당신은 noWeekends 주말 선택을 비활성화하는 기능을 사용할 수 있습니다

   당신은 noWeekends 주말 선택을 비활성화하는 기능을 사용할 수 있습니다

     $(function() {
        $( "#datepicker" ).datepicker({
        beforeShowDay: $.datepicker.noWeekends
        });
        });
   

8. ---

   8.

   $("#selector").datepicker({ beforeShowDay: highlightDays });
   
   ...
   
   var dates = [new Date("1/1/2011"), new Date("1/2/2011")];
   
   function highlightDays(date) {
   
       for (var i = 0; i < dates.length; i++) {
           if (date - dates[i] == 0) {
               return [true,'', 'TOOLTIP'];
           }
       }
       return [false];
   
   }
   

9. ---

   9.이 버전에서는, 월, 일 및 연도를 결정는 일 달력에 차단합니다.

   이 버전에서는, 월, 일 및 연도를 결정는 일 달력에 차단합니다.

   $(document).ready(function (){
     var d         = new Date();
     var natDays   = [[1,1,2009],[1,1,2010],[12,31,2010],[1,19,2009]];
   
     function nationalDays(date) {
       var m = date.getMonth();
       var d = date.getDate();
       var y = date.getFullYear();
   
       for (i = 0; i < natDays.length; i++) {
         if ((m == natDays[i][0] - 1) && (d == natDays[i][1]) && (y == natDays[i][2]))
         {
           return [false];
         }
       }
       return [true];
     }
     function noWeekendsOrHolidays(date) {
       var noWeekend = $.datepicker.noWeekends(date);
         if (noWeekend[0]) {
           return nationalDays(date);
         } else {
           return noWeekend;
       }
     }
     $(function() { 
       $(".datepicker").datepicker({
   
         minDate: new Date(d.getFullYear(), 1 - 1, 1),
         maxDate: new Date(d.getFullYear()+1, 11, 31),
   
         hideIfNoPrevNext: true,
         beforeShowDay: noWeekendsOrHolidays,
        });
     });
   });
   

10. ---

    10.최신 부트 스트랩 3 버전 (부트 스트랩-datepicker.js는) beforeShowDay이 형식의 결과는 예상 :

    최신 부트 스트랩 3 버전 (부트 스트랩-datepicker.js는) beforeShowDay이 형식의 결과는 예상 :

    { enabled: false, classes: "class-name", tooltip: "Holiday!" }
    

    당신이 CSS 걱정하고 툴팁하지 않는 경우 또는 단순히 날짜를 선택할 수없는 만들 수있는 부울 거짓을 반환합니다.

    이의 라인을 따라 뭔가를 할 필요가 있으므로 또한, 더 $의 .datepicker.noWeekends 없다 :

    var HOLIDAYS = {  // Ontario, Canada holidays
        2017: {
            1: { 1: "New Year's Day"},
            2: { 20: "Family Day" },
            4: { 17: "Easter Monday" },
            5: { 22: "Victoria Day" },
            7: { 1: "Canada Day" },
            8: { 7: "Civic Holiday" },
            9: { 4: "Labour Day" },
            10: { 9: "Thanksgiving" },
            12: { 25: "Christmas", 26: "Boxing Day"}
        }
    };
    
    function filterNonWorkingDays(date) {
        // Is it a weekend?
        if ([ 0, 6 ].indexOf(date.getDay()) >= 0)
            return { enabled: false, classes: "weekend" };
        // Is it a holiday?
        var h = HOLIDAYS;
        $.each(
            [ date.getYear() + 1900, date.getMonth() + 1, date.getDate() ], 
            function (i, x) {
                h = h[x];
                if (typeof h === "undefined")
                    return false;
            }
        );
        if (h)
            return { enabled: false, classes: "holiday", tooltip: h };
        // It's a regular work day.
        return { enabled: true };
    }
    
    $("#datePicker").datepicker({ beforeShowDay: filterNonWorkingDays });
    

11. ---

    11.토요일과 일요일를 들어 당신이 뭔가를 할 수 있습니다

    토요일과 일요일를 들어 당신이 뭔가를 할 수 있습니다

                 $('#orderdate').datepicker({
                                   daysOfWeekDisabled: [0,6]
                     });
    

from https://stackoverflow.com/questions/501943/can-the-jquery-ui-datepicker-be-made-to-disable-saturdays-and-sundays-and-holid by cc-by-sa and MIT license