禁用 Bootstrap 日期选择器的未来日期选择

Question

我有一个带有日期输入的表单，我想阻止用户选择未来的日期：

 $(document).ready(function(){ $('.month').datepicker({ format: 'yyyy-mm-dd', endDate: '+1d', }); });

 <div> <div class="col-md-6"> <div class="form-group"> <div class="col-md-11 col-xs-11"> <input type="text" readonly="" id="sale_from" placeholder="Click & Select From Date" value="" size="16" class="form-control month"> </div> </div> </div> <div class="col-md-6"> <div class="form-group"> <div class="col-md-11 col-xs-11"> <input type="text" readonly="" id="sale_to" placeholder="Click & Select To Date" size="16" class="form-control month"> </div> </div> </div> </div>

Answer 1

好吧，我看到你的代码是完美的，除了语法错误（在endDate参数之后，但它不会影响任何东西）

因此，请检查您正在使用的datepicker JS，因为有多个Bootstrap datepickers可用。

我已经提供了工作演示，请将相同的插件复制到您的应用程序并进行测试。

 $('.month').datepicker({ format: 'yyyy-mm-dd', endDate: '+1d' });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.0/js/bootstrap-datepicker.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.0/css/bootstrap-datepicker.css" rel="stylesheet"/> <div> <div class="col-md-6"> <div class="form-group"> <div class="col-md-11 col-xs-11"> <input type="text" readonly="" id="sale_from" placeholder="Click & Select From Date" value="" size="16" class="form-control month"> </div> </div> </div> <div class="col-md-6"> <div class="form-group"> <div class="col-md-11 col-xs-11"> <input type="text" readonly="" id="sale_to" placeholder="Click & Select To Date" size="16" class="form-control month"> </div> </div> </div>

Answer 2

请试试这个，而不是 endDate 你应该使用 maxDate 参数。

<!DOCTYPE html>
<html>
<head>
 <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(document).ready(function(){
    $('.month').datepicker({
            format: 'yyyy-mm-dd',
            maxDate: new Date, minDate: new Date(2007, 6, 12) 
    });
});
</script>
</head>
<body>
<div>
<div class="col-md-6">
    <div class="form-group">
        <div class="col-md-11 col-xs-11">
            <input type="text" readonly="" id="sale_from" placeholder="Click & Select From Date" value="" size="16" class="form-control month">
        </div>
    </div>
</div>
<div class="col-md-6">
    <div class="form-group">
        <div class="col-md-11 col-xs-11">
            <input type="text" readonly="" id="sale_to" placeholder="Click & Select To Date" size="16" class="form-control month">
        </div>
    </div>
</div>
</body>
</html>

禁用 Bootstrap 日期选择器的未来日期选择

问题描述

2 个解决方案

解决方案1
2 2016-09-26 10:08:26

解决方案2
0 2016-09-26 10:01:31

禁用 Bootstrap 日期选择器的未来日期选择

问题描述

2 个解决方案

解决方案1 2 2016-09-26 10:08:26

解决方案2 0 2016-09-26 10:01:31

解决方案1
2 2016-09-26 10:08:26

解决方案2
0 2016-09-26 10:01:31