選択可能な日付を制限するオプションを提供するdatepickerを使用する必要があります。minDate、maxDateオプションを使用してサポートするために使用されるjQueryUIを使用していました。
$("#id_date").datepicker({minDate: +1, maxDate: '+1M +10D'});
最近、私たちは自分たちのスタイルにTwitterBootstrapを使い始めました。そして明らかに、TwitterBootstrapはjQueryUIスタイルと互換性がありません。そこで、 http： //www.eyecon.ro/bootstrap-datepicker/で入手できるブートストラップ互換のdatepickerの1つを使用してみました。
残念ながら、上記のプラグインはjQueryUIのdatepickerほど構成可能ではありません。新しい日付ピッカーで選択可能な日付範囲を制限するのを手伝ってくれる人はいますか？
Bootstrap datepickerは、日付範囲を設定できます。ただし、初期リリース/マスターブランチでは使用できません。そこでブランチを「範囲」として確認します（またはhttps://github.com/eternicode/bootstrap-datepickerを参照してください）。startDateとendDateを使用するだけで実行できます。
例：
$('#datepicker').datepicker({
startDate: '-2m',
endDate: '+2d'
});
選択可能な日付範囲では、このようなものを使用することをお勧めします。私のソリューションは、＃to_dateより大きい#from_dateを選択することを防ぎ、ユーザーが#from_dateボックスで新しい日付を選択するたびに#to_datestartDateを変更します。
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"
また、ブートストラップdatepicker.jsファイルと.cssファイルも含めることを忘れないでください。
上記の例は少し単純化できます。さらに、日付ピッカーだけで日付を選択する代わりに、キーボードから手動で日付を入力できます。値をクリアするときは、 startDate/endDate境界を削除するための'onclearDate'アクションも処理する必要があります。
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">
ほとんどの回答と説明は、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,]
もう1つの可能性はdata、次のような属性を持つオプションを使用することです（1週間前の最小日付）：
<input class='datepicker' data-date-start-date="-1w">
詳細：http：//bootstrap-datepicker.readthedocs.io/en/latest/options.html
私は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'))
});
<script type="text/javascript">
$（document）.ready（function（）{$（ "＃submitdate"）。datepicker（{minDate：0、maxDate：0、
dateFormat: "yy-mm-dd",
});