3

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>

Improve this question
1

5 Answers 5

Reset to default
6

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>

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

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?

Improve this answer

Comments

0

jQuery Date Picker - disable past dates

Here is the link that will help you.

You can do this by mindate and maxdate.

Improve this answer

4 Comments

Wouldn't you mark to close this using that link instead?
This doesn't appear to work for Bootstrap datepicker.
@Mr.Polywhirl, does he has permissions for close question with this rate?
code.runnable.com/WGPyKBHyWd8dnl4G/output Check this for bootstrap date picker. date.setDate(date.getDate()-1); $('#example1').datepicker({ startDate: date });
0

you can disable the past dates by setting startDate property. No need for separate function.

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

Comments

0

Try with ease : Use minDate

var date = new Date(); var today = new Date(date.getFullYear(), date.getMonth(), date.getDate()); $('#date').datepicker({ minDate: today });
Improve this answer

1 Comment

He is using Bootstrap datepicker not jQuery datepicker so minDate is not going to work...

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.