Disable past dates in Bootstrap datepicker

Question

I have an application in PHP where I use bootstrap datepicker.

I need to disable all past dates in the datepicker before today. I was referred to this link for doing that.

I edited the datepicker's JS according to the information provided in that source, but it still isn't working.

Here's my JS code:

$('.sandbox-container input').datepicker({
  format: "dd/mm/yyyy",
  orientation: "auto",
  startDate: new Date(),          //here I tried to set the date
  clearBtn: true
});

And here's my PHP code:

<div class="sandbox-container">
<div class="form-group col-sm-6 col-xs-12">
<input type="text" class="form-control date-selecter" value="Date From" id="datefrom" name="datefrom">
            </div>
<div class="form-group col-sm-6 col-xs-12">
<input type="text" class="form-control date-selecter" value="Date To" id="dateto" name="dateto">
                </div>
            </div>

Can anyone please help me to do this?

score 5 · Accepted Answer · edited May 10 '18 at 16:45

5

I made it working by doing this:

var date = new Date();
date.setDate(date.getDate());

$('.sandbox-container input').datepicker({
  format: "dd/mm/yyyy",
  orientation: "auto",
  startDate: date,
  clearBtn: true
});

edited May 10 '18 at 16:45

John Slegers

45,213
22
199
169

answered May 06 '18 at 07:25

Aishwaryas

633
2
18
44

Akhil Singh · Answer 2 · 2018-05-11T04:48:58.890

Try this.

$(".datepicker").datepicker({
    showOn: 'button',
    dateFormat: "yy-mm-dd",
    changeMonth: true,
    
     minDate: new Date,
     
    changeYear: true,
    autoclose: false
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.13/jquery-ui.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="Stylesheet" type="text/css" />

<script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css" />
<input type="text" class="datepicker" /><br/>
<style>
    .ui-datepicker {font-size:60%; }
</style>

Disable past dates in Bootstrap datepicker

2 Answers2