Bootstrap Datepicker Start and End date Validation

You can easily enable date selection to the form element using Bootstrap datepicker if you are already using Bootstrap in your page.

You need to add external Bootstrap datepicker library.

This allows the users to select any from the datepicker and they are not restricted.

To restrict the date selection you can use startDate and endDate option while initializing it on the HTML element.

Bootstrap Datepicker start and end date validation


Contents

  1. Download and Include
  2. Fixed Start and End date
  3. With set of String values
  4. Conclusion

 


 

1. Download and Include

  • Download jQuery and Bootstrap.
  • Also, need to download Bootstrap datepicker which you can download from here.
  • Include jQuery, Bootstrap, and Bootstrap datepicker script and CSS files.
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" ></script>

<!-- Datepicker -->
<link href='bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css' rel='stylesheet' type='text/css'>
<script src='bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js' type='text/javascript'></script>

 

2. Fixed Start and End date

Pass the date in the valid format in startDate and endDate options while initializing.

In the example, I am setting date range between '2018-1-5' and '2018-1-12'.

Completed Code

<div class='container' style='margin-top: 100px;'>
 
 <input type='text' class="form-control" id='datepicker' placeholder='Select Date' style='width: 300px;' >

</div>

<!-- Script -->
<script type="text/javascript">
$(document).ready(function(){
 
  $('#datepicker').datepicker({
    format: "yy-mm-dd",
    startDate: new Date('2018-1-5'),
    endDate: new Date('2018-1-12')
  });

});
</script>

Output


 

3. With set of String values

To make the datepicker range change according to the current date then you can use defined set of string values in the options.

There are the following symbols are available –

y,m,d,+,-

Using this you can specify startDate and endDate values e.g. ‘+2m’,’-2m’,’+1y +10d’,’-10d’, etc

Completed Code

<div class='container' style='margin-top: 100px;'>
 
 <input type='text' class="form-control" id='datepicker' placeholder='Select Date' style='width: 300px;' ><br><br>

 <input type='text' class="form-control" id='datepicker2' placeholder='Select Date' style='width: 300px;' >
 
</div>

<!-- Script -->
<script type="text/javascript">
$(document).ready(function(){
 
  $('#datepicker').datepicker({
   format: "yy-mm-dd",
   startDate: '-1y -1m',
   endDate: '+2m +10d'
  });

  $('#datepicker2').datepicker({
   format: "yy-mm-dd",
   startDate: '-1m',
   endDate: '+10d'
  }); 
});
</script>

Output


 

4. Conclusion

Use startDate and endDate option to define the datepicker range where you can use fixed date values or use valid string (y,m,d,+,-) to define value.

Related Post

Spread the love

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *