토요일과 일요일 (공휴일)을 비활성화하도록 jQuery UI Datepicker를 만들 수 있습니까?

약속 날짜를 선택하기 위해 날짜 선택기를 사용합니다. 이미 다음 달에 대해서만 기간을 설정했습니다. 잘 작동합니다. 토요일과 일요일을 사용 가능한 선택에서 제외하고 싶습니다. 이것을 할 수 있습니까? 그렇다면 어떻게?

이 beforeShowDay날짜가 허용 또는 false 경우 그렇지 않은 경우는 true를 돌려 각 날짜에 대해 호출하는 함수를 취 옵션은. 문서에서 :

beforeShowDay

이 함수는 날짜를 매개 변수로 사용하며이 날짜를 선택할 수 있는지 여부를 나타내는 [0]이 true / false 인 배열을 리턴해야 하며 기본 프리젠 테이션의 경우 1 은 CSS 클래스 이름 또는 ''과 같습니다. 날짜 선택기에서 매일 표시되기 전에 호출됩니다.

날짜 선택기에 일부 공휴일을 표시하십시오.

$(".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 옵션 은 선택적 세 번째 매개 변수 인 팝업 툴팁을 허용합니다.

주말이 전혀 나타나지 않게하려면 다음을 수행하십시오.

CSS

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

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

아래 내 기여는 여러 날이 거짓을 반환 할 수있는 배열을 추가합니다 (매주 화요일, 수요일 및 목요일 휴무). 그리고 특정 날짜와 연도 및 주말 없음 기능을 묶었습니다.

주말을 원하지 않으면 [토요일], [일요일]을 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];
    }




});

날짜 선택기에는이 기능이 내장되어 있습니다!

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

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

여기에서 모두가 좋아하는 솔루션은 매우 강렬한 것 같습니다 ... 개인적으로 다음과 같은 작업을 수행하는 것이 훨씬 쉽다고 생각합니다.

       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;
            }
        });

이렇게하면 날짜를 사람이 읽을 수 있습니다. 실제로 그렇게 다르지는 않습니다.이 방법으로 나에게 더 의미가 있습니다.

이 코드 버전은 SQL 데이터베이스에서 휴일 날짜를 가져오고 UI Datepicker에서 지정된 날짜를 비활성화합니다.

$(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로 데이터베이스를 생성하고 휴일 날짜를 MM / DD / YYYY 형식으로 Varchar로 Varchar로 입력하십시오. 아래 내용을 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]

행복한 코딩 !!!! :-)

주말 선택 기능을 사용하지 않으려면 noWeekends 기능을 사용할 수 있습니다

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

$("#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];

}

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

$(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,
     });
  });
});

며칠 동안은 이런 식으로 할 수 있습니다. <input type="text" class="form-control datepicker" data-disabled-days="1,3">여기서 1은 월요일이고 3은 수요일입니다

최신 Bootstrap 3 버전 (bootstrap-datepicker.js) beforeShowDay에서는 다음 형식의 결과가 필요합니다.

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

또는 CSS와 툴팁에 신경 쓰지 않으면 부울 false을 반환 하여 날짜를 선택할 수 없게 만듭니다.

또한,이 없으므로 $.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 });

토요일과 일요일에 이런 식으로 할 수 있습니다

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