twitter-bootstrap 在引导日期选择器中禁用过去的日期
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/41366363/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Disable past dates in bootstrap date picker
提问by Zachary Dale
I have used the date input form derived from:
我使用了源自以下内容的日期输入表单：
Youderian, C. How to Add a Date Picker to a Bootstrap Form. FormDen. [Blog]. 2015-10-27.
Youderian, C.如何将日期选择器添加到 Bootstrap 表单。形式登。[博客]。2015-10-27。
But I am unable to disable the past dates. I tried the following; according to an issuein GitHub, but it didn't work for me.
但我无法禁用过去的日期。我尝试了以下方法；根据GitHub 中的一个问题，但它对我不起作用。
$(document).ready(function() {
var date_input = $('input[name="date"]'); //our date input has the name "date"
var container = $('.bootstrap-iso form').length > 0 ? $('.bootstrap-iso form').parent() : "body";
date_input.datepicker({
format: 'mm/dd/yyyy',
container: container,
todayHighlight: true,
autoclose: true,
})
})
$(function() {
var nowDate = new Date();
var today = new Date(nowDate.getFullYear(), nowDate.getMonth(),
nowDate.getDate(), 0, 0, 0, 0);
$('#date').datepicker({
startDate: today
});
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/css/tether.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.min.css" rel="stylesheet"/>
<div class="bootstrap-iso">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-12">
<form class="form-horizontal" method="post">
<div class="form-group ">
<label class="control-label col-sm-2" for="date">
Date
</label>
<div class="col-sm-10">
<input class="form-control" id="date" name="date" placeholder="MM/DD/YYYY" type="text" />
</div>
</div>
<div class="form-group">
<div class="col-sm-10 col-sm-offset-2">
<button class="btn btn-primary " name="submit" type="submit">
Submit
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>回答by Mr. Polywhirl
You can either add startDateto the config when you first convert it to a date-picker field or you can set the property using setStartDate.
您可以startDate在首次将其转换为日期选择器字段时将其添加到配置中，也可以使用setStartDate.
Pick any of the two.
选择两者中的任何一个。
$(document).ready(function() {
var dateInput = $('input[name="date"]'); // Our date input has the name "date"
var container = $('.bootstrap-iso form').length > 0 ? $('.bootstrap-iso form').parent() : 'body';
dateInput.datepicker({
format: 'mm/dd/yyyy',
container: container,
todayHighlight: true,
autoclose: true,
startDate: truncateDate(new Date()) // <-- THIS WORKS
});
$('#date').datepicker('setStartDate', truncateDate(new Date())); // <-- SO DOES THIS
});
function truncateDate(date) {
return new Date(date.getFullYear(), date.getMonth(), date.getDate());
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/css/tether.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.min.css" rel="stylesheet"/>
<div class="bootstrap-iso">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-12">
<form class="form-horizontal" method="post">
<div class="form-group ">
<label class="control-label col-sm-2" for="date">
Date
</label>
<div class="col-sm-10">
<input class="form-control" id="date" name="date" placeholder="MM/DD/YYYY" type="text" />
</div>
</div>
<div class="form-group">
<div class="col-sm-10 col-sm-offset-2">
<button class="btn btn-primary " name="submit" type="submit">
Submit
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>回答by Info Truth
jQuery Date Picker - disable past dates
Here is the link that will help you.
这是可以帮助您的链接。
You can do this by mindate and maxdate.
你可以通过 mindate 和 maxdate 来做到这一点。
回答by G0dsquad
You can use startDateand endDatee.g. '+2d', '-2m'
您可以使用startDate和endDate例如 '+2d'，'-2m'
In your CodePen link:
在您的 CodePen 链接中：
date_input.datepicker({
format: 'mm/dd/yyyy',
container: container,
todayHighlight: true,
autoclose: true,
startDate: '-2d',
endDate: '+2d'
})
How to restrict the selectable date ranges in Bootstrap Datepicker?
回答by Lakhan
Try with ease : Use minDate
轻松尝试：使用 minDate
var date = new Date();
var today = new Date(date.getFullYear(), date.getMonth(), date.getDate());
$('#date').datepicker({
minDate: today
});
回答by Jayakrishnan
you can disable the past dates by setting startDateproperty. No need for separate function.
您可以通过设置startDate属性禁用过去的日期。不需要单独的功能。
date_input.datepicker({
format: 'mm/dd/yyyy',
container: container,
todayHighlight: true,
autoclose: true,
startDate: new Date()
})
