web-dev-qa-db-ja.com

bootstrap-datepickerを平日のみに制限しますか？

とにかくbootstrap以下にある日付の選択で日付の選択のみを許可しますか？ https://github.com/eternicode/bootstrap-datepicker/

私はこのように日付ピッカーをインスタンス化しています：

$('#datepicker').datepicker();

/* Update datepicker plugin so that MM/DD/YYYY format is used. */
$.extend($.fn.datepicker.defaults, {
    parse: function (string) {
        var matches;
        if ((matches = string.match(/^(\d{2,2})\/(\d{2,2})\/(\d{4,4})$/))) {
            return new Date(matches[3], matches[1] - 1, matches[2]);
        } else {
            return null;
        }
    },
    format: function (date) {
        var
        month = (date.getMonth() + 1).toString(),
        dom = date.getDate().toString();
        if (month.length === 1) {
            month = "0" + month;
        }
        if (dom.length === 1) {
            dom = "0" + dom;
        }
        return month + "/" + dom + "/" + date.getFullYear();
    }
});

助けてくれてありがとう。

jquerytwitter-bootstrapdatepickerbootstrap-datepicker
22
SWL

https://github.com/eternicode/bootstrap-datepicker の最新バージョンには、特定の曜日の選択を無効にするオプションがすでにあります。 the docs から：

daysOfWeekDisabled

文字列、配列。デフォルト： ''、 []

無効にする必要がある曜日。値は0（日曜日）から6（土曜日）です。複数の値はコンマで区切る必要があります。例：週末を無効にする：'0,6'または[0,6]。

つまり、次のように日付ピッカーをインスタンス化するだけです。

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

これはこれを示すjsfiddleです： http://jsfiddle.net/vj77M/1/

33
fin

**更新**

ブートストラップの日付ピッカーにdaysOfWeekDisabledオプションが追加されました。以下の@finの回答を参照してください。

**古い回答**

これは実用的なデモです

週が日曜日に始まると仮定します。

$(function() {
    function disableWeekends($this) {
        var $days = $this.find('.datepicker-days tr').each(function() {
            var $days = $(this).find('.day');
            $days.eq(0).addClass('old').click(false); //Sunday
            $days.eq(6).addClass('old').click(false); //Saturday
        });

    }

    $('#dp1').datepicker({
        format: 'mm-dd-yyyy'
    });

    // get instance of the jQuery object created by
    // datepicker    
    var datepicker = $('#dp1').data('datepicker').picker;

    // disable weekends in the pre-rendered version
    disableWeekends(datepicker);

    // disable weekends whenever the month changes
    var _fill = datepicker.fill;
    datepicker.fill = function() {
        _fill.call(this);
        disableWeekends(this.picker);
    };

});​

そうでない場合は、$ days.eq（...）を正しいインデックスに変更してください。

もちろん、これはクリックイベントのみをカバーし、正しい方向に進みます。キーボードナビゲーションなど、他の問題にも対処する必要があると確信しています。

[〜＃〜]編集[〜＃〜]

最新バージョンについては、適切な場所でこのコードを使用してください

// get instance of the jQuery object created by datepicker    
var datepicker = $('#dp1').data('datepicker');

// disable weekends in the pre-rendered version
disableWeekends(datepicker.picker);

// disable weekends whenever the month changes
var _fill = datepicker.fill;
datepicker.fill = function() {{
    _fill.call(this);
    disableWeekends(datepicker.picker);
}};
11
Kato

また、それを試すことができます。

onRender: function(date) {
    return date.getDay() == 0 || date.getDay() == 6 ? 'disabled' : '';
}

それが誰かを助けることを願っています。 :)

0
Магнайбаяр Ганзориг