在引导日期选择器中禁用过去的日期

Question

我使用了来自以下日期的输入形式：

Youderian，C. 如何将日期选择器添加到Bootstrap表单 。 FormDen 。 [博客]。 2015年10月27日。

但是我无法禁用过去的日期。 我尝试了以下方法； 根据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> 

Answer 1

您可以在将startDate首次转换为日期选择器字段时将其添加到配置中，也可以使用setStartDate设置属性。

选择两个。

 $(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> 

Answer 2

jQuery Date Picker-禁用过去的日期

这是对您有帮助的链接。

您可以通过铭记和maxdate做到这一点。

Answer 3

您可以使用startDate和endDate例如'+2d' ， '-2m'

在您的CodePen链接中：

date_input.datepicker({
    format: 'mm/dd/yyyy',
    container: container,
    todayHighlight: true,
    autoclose: true,
    startDate: '-2d',
    endDate: '+2d'
})

如何限制Bootstrap Datepicker中的可选日期范围？

Answer 4

轻松尝试：使用minDate

var date = new Date();
var today = new Date(date.getFullYear(), date.getMonth(), date.getDate());

$('#date').datepicker({ 
    minDate: today
});

Answer 5

您可以通过设置startDate属性来禁用过去的日期。 无需单独的功能。

date_input.datepicker({
    format: 'mm/dd/yyyy',
    container: container,
    todayHighlight: true,
    autoclose: true,
    startDate: new Date()
})