web-dev-qa-db-ja.com

jQuery datepicker UIで選択した日付範囲を無効/有効にします

そのため、次のデモがあります http://dev.driz.co.uk/week.html これは、1年の各月に複数のインスタンスを持つjQuery UI datepickerを示しています。

ユーザーが週全体を選択し、その週の開始日と終了日が右側のサイドバーに週番号とともに保存されるように変更しました。

私がしたいのは、ユーザーが選択した日付を無効にして、選択された日付をカレンダーピッカーで確認できるようにすることです（また、同じ日付範囲を複数回追加しないようにします）。

しかし、私はこれでどこから始めればいいのかわかりません...いくつかの有効化および無効化の日付関数を作成しましたが、beforeShowDayメソッドを使用して実際に日付を無効化する方法がわかりません。

例えば：

var array = ["2013-03-14","2013-03-15","2013-03-16"]

$('.week-picker').datepicker({
    beforeShowDay: function(date){
        var string = jQuery.datepicker.formatDate('yy-mm-dd', date);
        return [ array.indexOf(string) == -1 ]
    }
});

しかし、日付の範囲を無効にするにはどうすればよいですか？開始日と終了日しかないので。そして、私の例のように日付ピッカーがページ上にある後にbeforeShowDayを呼び出すことができますか？そして、どのようにして日付を再度有効にできますか？

コードは次のとおりです。

$(function() {

    var startDate;
    var endDate;

    var selectCurrentWeek = function() {
        window.setTimeout(function () {
            $('.week-picker').find('.ui-datepicker-current-day a').addClass('ui-state-active');
        }, 1);
    }

    $('.week-picker').datepicker( {
        defaultDate: '01/01/2014',
        minDate: '01/01/2013',
        maxDate: '01/01/2015',
        changeMonth: false,
        changeYear: true,
        showWeek: true,
        showOtherMonths: true,
        selectOtherMonths: true,
        numberOfMonths: 12,
        onSelect: function(dateText, inst) { 
            var date = $(this).datepicker('getDate');
            startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay());
            endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6);
            var dateFormat = inst.settings.dateFormat || $.datepicker._defaults.dateFormat;

            addWeek($.datepicker.iso8601Week(new Date(dateText)), $.datepicker.formatDate( dateFormat, startDate, inst.settings ), $.datepicker.formatDate( dateFormat, endDate, inst.settings ));

            disableDates( $.datepicker.formatDate( dateFormat, startDate, inst.settings ), $.datepicker.formatDate( dateFormat, endDate, inst.settings ));

            selectCurrentWeek();
        },
        beforeShowDay: function(date) {
            var cssClass = '';
            if(date >= startDate && date <= endDate)
                cssClass = 'ui-datepicker-current-day';
            return [true, cssClass];
        },
        onChangeMonthYear: function(year, month, inst) {
            selectCurrentWeek();
        }
    });

    $('.week-picker .ui-datepicker-calendar tr').live('mousemove', function() { $(this).find('td a').addClass('ui-state-hover'); });
    $('.week-picker .ui-datepicker-calendar tr').live('mouseleave', function() { $(this).find('td a').removeClass('ui-state-hover'); });

    $('.remove').live('click', function(e){

        enableDates($(this).attr('data-startdate'), $(this).attr('data-enddate'));

        $(this).parent('div').remove();
    });

});

// adds the week to the sidebar
function addWeek(weekNum, startDate, endDate){

    $('.weeks-chosen').append('<div data-startdate="'+startDate+'" data-enddate="'+endDate+'"><span class="weekNum">Week '+ (weekNum - 1) +'</span> - <span class="startDate">'+startDate+'</span> - <span class="endDate">'+endDate+'</span> | <span class="remove">X Remove</span></div>');

}

// disable the dates on the calendar
function disableDates(startDate, endDate){


}

// enable the dates on the calendar
function enableDates(startDate, endDate){


}

簡単に言うと、ここには2つの質問があります...日付ピッカーがページに追加された後、日付を無効にするには次に、beforeShowDayメソッドは範囲ではなく日付の配列を想定しているように見えるため、2つの日付間の範囲を無効にするにはどうすればよいですか？

javascriptjqueryjquery-uidatepicker
9
Cameron

しかし、日付の範囲を無効にするにはどうすればよいですか？開始日と終了日しかないので。

1つの方法は、開始日と終了日に基づいて日付の配列を作成することです。 beforeShowDayでその配列を使用して、範囲を無効にします。

デモ： http://jsfiddle.net/abhitalks/FAt66/1/

たとえば、JSの関連部分：

var startDate = "2014-06-15", // some start date
    endDate  = "2014-06-21",  // some end date
    dateRange = [];           // array to hold the range

// populate the array
for (var d = new Date(startDate); d <= new Date(endDate); d.setDate(d.getDate() + 1)) {
    dateRange.Push($.datepicker.formatDate('yy-mm-dd', d));
}

// use this array 
beforeShowDay: function (date) {
    var dateString = jQuery.datepicker.formatDate('yy-mm-dd', date);
    return [dateRange.indexOf(dateString) == -1];
}

これで、日付が選択されるたびにstartDateとendDateを設定できます。上記にリンクしたフィドルの例では、2つの上位入力で日付が選択されるたびに開始日と終了日が設定されます。 2番目の入力で日付が選択されると、データ配列が作成されます。

注：上記の例は加算的です。つまり、新しい範囲を選択するたびに、無効な日付としてターゲットに追加されます。新しい範囲を指定する前に既存の無効な範囲をクリアする場合は、destroyを実行し、日付ピッカーを再接続します。 （また、dateRange配列もリセットします）

デモ2： http://jsfiddle.net/abhitalks/FAt66/3/

JSの関連部分：

$("#dt").datepicker("destroy");
$("#dt").datepicker({ 
    dateFormat : 'yy-mm-dd',
    beforeShowDay: disableDates
});

var disableDates = function(dt) {
    var dateString = jQuery.datepicker.formatDate('yy-mm-dd', dt);
    return [dateRange.indexOf(dateString) == -1];
}

実際のコードを見て、必要なのはこれだけです：

onSelect: function(dateText, inst) { 
    var date = $(this).datepicker('getDate');
    startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay());
    endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - date.getDay() + 6);
    var dateFormat = inst.settings.dateFormat || $.datepicker._defaults.dateFormat;

    addWeek($.datepicker.iso8601Week(new Date(dateText)), $.datepicker.formatDate( dateFormat, startDate, inst.settings ), $.datepicker.formatDate( dateFormat, endDate, inst.settings ));

    for (var d = new Date(startDate);
        d <= new Date(endDate);
        d.setDate(d.getDate() + 1)) {
            dateRange.Push($.datepicker.formatDate('dd/mm/yyyy', d));
    }

    selectCurrentWeek();
},
beforeShowDay: disableDates,
    ...

これにより、新しく選択された日付範囲がアレイに追加され続け、さらに無効化が続けられます。ただし、既に選択されている週が削除された場合、エスケープルートが必要になることに注意してください。その場合、1つのマスターアレイに結合できる複数のアレイを使用できます。

14
Abhitalks

日付のリストを無効にする必要がある場合、またはプロセス全体で日付を無効にする必要がある予約の種類のプロジェクトの場合など。したがって、次のコードを使用できます。

$(function() {
    //This array containes all the disabled array
      datesToBeDisabled = ["2019-03-25", "2019-03-28"];

        $("#datepicker").datepicker({
          changeMonth: true,
          changeYear: true,
          minDate : 0,
          todayHighlight: 1,
          beforeShowDay: function (date) {
              var dateStr = jQuery.datepicker.formatDate('yy-mm-dd', date);
                  return [datesToBeDisabled.indexOf(dateStr) == -1];
          },

        });
});
0
S Debasish Nayak