0

ここの助けを借りて、jQuery DatePicker で特定の曜日を無効にするスクリプトを作成しました。ここで、特定の期間 (予定された休日) も無効にするオプションを追加したいと考えています。例えば。2012 年 8 月 12 日 - 2012 年 8 月 30 日。これを以下のスクリプトに含めるのを手伝ってくれる人はいますか?

jQuery バージョン 1.7.2 と jQuery UI 1.8.18 を使用しています。

<script>

$(function() { 
$('input.datepicker').datepicker({

dateFormat: 'DD, d MM, yy',
minDate: "+1d",
changeMonth: false, 
changeYear: false,
showOn: 'both',
buttonImage: 'images/calendar.gif',
buttonImageOnly: true,
beforeShowDay: enableDAYS
},
$.datepicker.regional['nl']);
});

function enableDAYS(date) {
var day = date.getDay();
return [(day > 2 && day < 7), ''];
}

</script>
4

3 に答える 3

1

次の機能を備えたjQuery日付ピッカーを生成しました。

  • 2日から3週間の日付を表示
  • 週末の選択を無効にします
  • 定義された祝日の選択を無効にします
  • ツールチップで休日の説明を提供します

詳細については、このプランカーを見つけてください。

// Contains Victorian public holidays which date selection needs to be restricted
var vicHolidays = [
  {
    date: '01/01/2015',
    desc: 'New Year Day'
  }, 
  {
    date: '26/01/2015',
    desc: 'Australia Day'
  },
  {
    date: '09/03/2015',
    desc: 'Labour Day'
  },
  {
    date: '03/04/2015',
    desc: 'Good Friday'
  },
  {
    date: '04/04/2015',
    desc: 'Saturday before Easter Sunday'
  },
  {
    date: '06/04/2015',
    desc: 'Easter Monday'
  },
  {
    date: '25/04/2015',
    desc: 'ANZAC Day'
  },
  {
    date: '08/06/2015',
    desc: 'Queens Birthday'
  },
  {
    date: '02/10/2015',
    desc: 'AFL Grand Final Holiday'
  },
  {
    date: '25/12/2015',
    desc: 'Christmas Day'
  },
  {
    date: '26/12/2015',
    desc: 'Boxing Day'
  },
  {
    date: '28/12/2015',
    desc: 'Boxing Day *Additional Day'
  }
  ];

$(function() {
  $("#datepicker").datepicker({
    firstDay: 1,    // First day of the week
    minDate: 2,     // Start of date selection
    maxDate: '10w',  // End of date selection

    /**
     * A function that takes a date as a parameter and must return an array with:
     * [0]: true/false indicating whether or not this date is selectable
     * [1]: a CSS class name to add to the date's cell or "" for the default presentation
     * [2]: an optional popup tooltip for this date
     * 
     */
    beforeShowDay: function(date) {
                var result = [true, "", ""];
                result = $.datepicker.noWeekends(date);

                if (vicHolidays === null) {
                    result[1] = "";
                } else {
                  // Format the date in the format dd/mm/yy
                    var key = $.datepicker.formatDate("dd/mm/yy", date);

        // Go through the defined Victorian holidays
                  for (var i=0; i<vicHolidays.length; i++) {
          if (key == vicHolidays[i].date) {
                      result[0] = false;
                        result[1] = "dp-highlight-holiday";
                        result[2] = vicHolidays[i].desc;
          }                      
                  }
                }
                return result;
            }
  });
});
于 2015-10-22T04:55:03.133 に答える
0

このソリューションのためにここでフィドルを作成しました。

これは、「2012年5月23日から2012年5月24日まで」の「計画された休日」をシミュレートします。

私がしたのは、既存のenableDAYS関数を次のように変更することだけでした。

function enableDAYS(date) {
var startDate = new Date();
startDate.setFullYear(2012, 4, 22);
var endDate = new Date();
endDate.setFullYear(2012, 4, 24)
var day = date.getDay();
return [(day >= 1 && day < 6) && !(date >= startDate && date <= endDate), ''];
}​

私のように日付を「ハードコード」するのではなく、自分で計画された休日をどこかから取得する必要があることは明らかです。:)同様の方法で祝日に対応できます。

于 2012-05-20T12:32:33.810 に答える
0

次のコードを使用して特定の日付範囲を無効にできますdateRange配列で日付範囲を指定できます。日付の形式は次のとおりですyyyy/MM/dd 。からの日付を無効にするには、次のように配列を変更する必要があり12/08/2012ます。30/08/2012dateRange

var dateRange = ["2012/08/12","2012/08/30"]; // yyyy/MM/dd

これがフィドルで使用されるコードです

//  unavailable dates range
var dateRange = ["2012/05/20","2012/05/29"]; // yyyy/MM/dd


function unavailable(date) {
    var startDate = new Date(dateRange[0]);
    var endDate = new Date(dateRange[1]);
    var day = date.getDay();



    if(date > startDate && date < endDate )
        return [false, "disabled"];
    else if(day > 0 && day < 6)
        return [true, "enabled"];
    else 
        return [false, "disabled"];

}

$('input.datepicker').datepicker({ beforeShowDay: unavailable });

そして、ここに実用的なフィドルがあります。

作業デモ

于 2012-05-20T12:34:40.823 に答える