Disable future date selection for Bootstrap datepicker

Question

I have a form with date input, and I want to prevent users from selecting future dates:

 $(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>

Answer 1

Well I see your code is perfect except the syntax error(, after endDate parameter but it wont affect anything)

So please check the datepicker JS you are using as there are multiple Bootstrap datepickers are available.

I have provided the working demo, please copy the same plugins to your app and test it out.

 $('.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>

Answer 2

Please try this, instead of endDate you should use maxDate parameter.

<!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>

Disable future date selection for Bootstrap datepicker

Question

2 answers

solution1
2 2016-09-26 10:08:26

solution2
0 2016-09-26 10:01:31

Disable future date selection for Bootstrap datepicker

Question

2 answers

solution1 2 2016-09-26 10:08:26

solution2 0 2016-09-26 10:01:31

solution1
2 2016-09-26 10:08:26

solution2
0 2016-09-26 10:01:31