web-dev-qa-db-ja.com

Bootstrap Datepickerで選択可能な日付範囲を制限する方法は？

選択可能な日付を制限するオプションを提供するdatepickerを使用する必要があります。 minDate、maxDateオプションを使用してサポートするために使用されるjQuery UIを使用していました。

$("#id_date").datepicker({minDate: +1, maxDate: '+1M +10D'});

最近、スタイルにTwitter Bootstrapの使用を開始しました。そして明らかに、Twitter BootstrapはjQuery UIスタイルと互換性がありません。そこで、 http://www.eyecon.ro/bootstrap-datepicker/ で利用可能なbootstrap互換のdatepickerのいずれかを使用してみました。

残念ながら、上記のプラグインはjQuery UIのdatepickerほど構成可能ではありません。新しいdatepickerで選択可能な日付範囲を制限することで誰でも私を助けることができます。

javascripttwitter-bootstrapdatepickerbootstrap-datepicker
45
Alagappan Ramu

Bootstrap datepickerは、日付範囲を設定できます。ただし、初期リリース/ Master Branchでは使用できません。ブランチを「範囲」として確認します（または、単に https://github.com/eternicode/bootstrap-datepicker で確認します）。startDateとendDateで簡単に確認できます。

例：

$('#datepicker').datepicker({
    startDate: '-2m',
    endDate: '+2d'
});
91
Danny

選択可能な日付範囲を使用すると、このようなものを使用できます。私の解決策は、＃to_dateより大きい#from_dateを選択することを防ぎ、ユーザーが#from_dateボックスで新しい日付を選択するたびに#to_date startDateを変更します：

http://bootply.com/74352

JSファイル：

var startDate = new Date('01/01/2012');
var FromEndDate = new Date();
var ToEndDate = new Date();

ToEndDate.setDate(ToEndDate.getDate()+365);

$('.from_date').datepicker({

    weekStart: 1,
    startDate: '01/01/2012',
    endDate: FromEndDate, 
    autoclose: true
})
    .on('changeDate', function(selected){
        startDate = new Date(selected.date.valueOf());
        startDate.setDate(startDate.getDate(new Date(selected.date.valueOf())));
        $('.to_date').datepicker('setStartDate', startDate);
    }); 
$('.to_date')
    .datepicker({

        weekStart: 1,
        startDate: startDate,
        endDate: ToEndDate,
        autoclose: true
    })
    .on('changeDate', function(selected){
        FromEndDate = new Date(selected.date.valueOf());
        FromEndDate.setDate(FromEndDate.getDate(new Date(selected.date.valueOf())));
        $('.from_date').datepicker('setEndDate', FromEndDate);
    });

HTML：

<input class="from_date" placeholder="Select start date" contenteditable="false" type="text">
<input class="to_date" placeholder="Select end date" contenteditable="false" type="text"

また、bootstrap datepicker.jsおよび.cssファイルも含めることを忘れないでください。

44
user2586273

上記の例は少し単純化できます。さらに、datepickerのみで日付を選択する代わりに、キーボードから日付を手動で入力できます。値をクリアする場合、'on clearDate' startDate/endDate境界を削除するアクションも処理する必要があります。

JSファイル：

$(".from_date").datepicker({
    format: 'yyyy-mm-dd',
    autoclose: true,
}).on('changeDate', function (selected) {
    var startDate = new Date(selected.date.valueOf());
    $('.to_date').datepicker('setStartDate', startDate);
}).on('clearDate', function (selected) {
    $('.to_date').datepicker('setStartDate', null);
});

$(".to_date").datepicker({
    format: 'yyyy-mm-dd',
    autoclose: true,
}).on('changeDate', function (selected) {
    var endDate = new Date(selected.date.valueOf());
    $('.from_date').datepicker('setEndDate', endDate);
}).on('clearDate', function (selected) {
    $('.from_date').datepicker('setEndDate', null);
});

HTML：

<input class="from_date" placeholder="Select start date" type="text" name="from_date">
<input class="to_date" placeholder="Select end date" type="text" name="to_date">
39
Marek

ほとんどの回答と説明は、endDateまたはstartDateの有効な文字列が何であるかを説明するものではありません。ダニーは2つの有用な例を示しました。

$('#datepicker').datepicker({
    startDate: '-2m',
    endDate: '+2d'
});

しかし、なぜですか？bootstrap-datetimepicker.jsのソースコードを見てみましょう。行1343から始まるコードには、どのように機能するかが記載されています。

if (/^[-+]\d+[dmwy]([\s,]+[-+]\d+[dmwy])*$/.test(date)) {
            var part_re = /([-+]\d+)([dmwy])/,
                parts = date.match(/([-+]\d+)([dmwy])/g),
                part, dir;
            date = new Date();
            for (var i = 0; i < parts.length; i++) {
                part = part_re.exec(parts[i]);
                dir = parseInt(part[1]);
                switch (part[2]) {
                    case 'd':
                        date.setUTCDate(date.getUTCDate() + dir);
                        break;
                    case 'm':
                        date = Datetimepicker.prototype.moveMonth.call(Datetimepicker.prototype, date, dir);
                        break;
                    case 'w':
                        date.setUTCDate(date.getUTCDate() + dir * 7);
                        break;
                    case 'y':
                        date = Datetimepicker.prototype.moveYear.call(Datetimepicker.prototype, date, dir);
                        break;
                }
            }
            return UTCDate(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate(), date.getUTCHours(), date.getUTCMinutes(), date.getUTCSeconds(), 0);
        }

4種類の式があります。

  • wは週を意味します
  • mは月を意味します
  • yは年を意味します
  • dは日を意味します

正規表現^[-+]\d+[dmwy]([\s,]+[-+]\d+[dmwy])*$を見てください。これらの-0dまたは+1m以上のことができます。

startDate:'+1y,-2m,+0d,-1w'のようにもっと頑張ってください。そして、セパレータ,は[\f\n\r\t\v,]

14
FavorMylikes

別の可能性は、次のようにdata属性を持つオプションを使用することです（最低1週間前の日付）。

<input class='datepicker' data-date-start-date="-1w">

詳細： http://bootstrap-datepicker.readthedocs.io/en/latest/options.html

2
overallduka

私はv3.1.3を使用していますが、data('DateTimePicker')をこのように使用する必要がありました

var fromE = $( "#" + fromInput );
var toE = $( "#" + toInput );
$('.form-datepicker').datetimepicker(dtOpts);

$('.form-datepicker').on('change', function(e){
   var isTo = $(this).attr('name') === 'to';

   $( "#" + ( isTo ? fromInput : toInput  ) )
      .data('DateTimePicker')[ isTo ? 'setMaxDate' : 'setMinDate' ](moment($(this).val(), 'DD/MM/YYYY'))
});
0
bresleveloper