[英]How to disable the current date and future dates in datepicker using JavaScript or Bootstrap
[英]Disable future date selection for Bootstrap datepicker
我有一個帶有日期輸入的表單,我想阻止用戶選擇未來的日期:
$(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>
好吧,我看到你的代碼是完美的,除了語法錯誤(在
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>
請試試這個,而不是 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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.