Disable past dates in bootstrap date picker
16,403
Solution 1
You can either add startDate
to the config when you first convert it to a date-picker field or you can set the property using 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>
Solution 2
You can use startDate
and endDate
e.g. '+2d'
, '-2m'
In your CodePen link:
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?
Author by
Zachary Dale
Updated on June 09, 2022Comments
-
Zachary Dale almost 2 years
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.
But I am unable to disable the past dates. I tried the following; according to an issue in GitHub, but it didn't work for me.
$(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>
-
Mr. Polywhirl over 7 yearsWouldn't you mark to close this using that link instead?
-
G0dsquad over 7 yearsThis doesn't appear to work for Bootstrap datepicker.
-
demo over 7 years@Mr.Polywhirl, does he has permissions for close question with this rate?
-
Admin over 7 yearscode.runnable.com/WGPyKBHyWd8dnl4G/output Check this for bootstrap date picker. date.setDate(date.getDate()-1); $('#example1').datepicker({ startDate: date });
-
Miguel Flores over 7 yearsHe is using Bootstrap datepicker not jQuery datepicker so minDate is not going to work...