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>
5
Answers
jQuery Date Picker – disable past dates
Here is the link that will help you.
You can do this by mindate and maxdate.
You can use
startDate
andendDate
e.g.'+2d'
,'-2m'
In your CodePen link:
How to restrict the selectable date ranges in Bootstrap Datepicker?
you can disable the past dates by setting startDate property. No need for separate function.
You can either add
startDate
to the config when you first convert it to a date-picker field or you can set the property usingsetStartDate
.Pick any of the two.
Try with ease : Use minDate