How to add Datepicker in Bootstrap

You need to include an external library to embed date picker on the elements with Bootstrap.

It is easy to add on the element like jQuery UI datepicker and have available multiple options, method, and events to control the date picker.

How to add datepicker in Bootstrap


Contents

  1. Download and Include
  2. Initialize
  3. Options
  4. Methods
  5. Events
  6. Conclusion

 

1. Download and Include

  • Download jQuery and Bootstrap.
  • Also, need to download Bootstrap date picker 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. Initialize

Create an input element and initialize it using either of two ways –

  • data-provide=”datepicker” attribute
  • datepicker() method

Example 

In the example, I have used both of the ways to add datepicker on the textboxes.

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

<!-- Script -->
<script type="text/javascript">
$(document).ready(function(){
 $('#datepicker').datepicker(); 
});
</script>

Output

Click on the textbox.


 

3. Options

Syntax ( data attribute ) –

data-date-[option-name] = value

Syntax ( datepicker() ) –

$(selector).datepicker({ option-name: value });

Some options are –

  • startDate – It either takes date or string as a value and disabled the earlier dates according to the specified value.
  • endDate – It either takes date or string as a value and set it to disable the date selection after the specified value.
  • format – Set date format with the combination of d, dd, D, DD, m, mm, M, MM, yy, yyyy. The default format is mm/dd/yyyy.
  • language – It changes the language of the date picker text. The default value is “en” (English). Need to include external language script when changing the language.
  • keyboardNavigation – It enables or disables keyboard navigation on the date picker. The default value is true.

Example

In the example, I set the Portuguese(pt) language with language option using data attribute and other with datepicker() method.

<div class='container' style='margin-top: 100px;'>
 <input type='text' class="form-control" data-date-language="pt" id='datepicker' style='width: 300px;' >
</div>

<!-- Script -->
<script type="text/javascript">
$(document).ready(function(){
 $('#datepicker').datepicker({
  "format": "mm-dd-yy",
  "startDate": "-5d",
  "endDate": "09-15-2017",
  "keyboardNavigation": false
 }); 
});
</script>

Output

Click on the textbox.


 

4. Methods

Syntax –

$(selector).datepicker("method-name",[value]);

Some methods are –

  • show – This displays the picker.
$('#datepicker').datepicker('show');
  • hide – This hides the picker.
$('#datepicker').datepicker('hide');
  • destroy – This removes the date picker and attached events from the element.
$('#datepicker').datepicker('destroy');
  • getDate – It returns the selected date from the picker otherwise null if no date is been selected.
$('#datepicker').datepicker('getDate');
  • getStartDate – Return the lower date limit of the date picker.
$('#datepicker').datepicker('getStartDate');
  • setStartDate – Set the lower date limit.
$('#datepicker').datepicker('setStartDate', '-5d');
  • getEndDate – Return the upper date limit.
$('#datepicker').datepicker('getEndDate');
  • setEndDate – Set the upper date limit.
$('#datepicker').datepicker('setEndDate', '+5d');

Example

<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='button' id='show' value='show'>
 <input type='button' id='setstartdate' value='Set Start Date'>
 <input type='button' id='getstartdate' value='Get Start Date'>
 <input type='button' id='setenddate' value='Set End Date'>
 <input type='button' id='getenddate' value='Get End Date'>
 <br/><br/>
 <div id='response'></div>
</div>

<!-- Script -->
<script type="text/javascript">
$(document).ready(function(){
 // Initialize
 $('#datepicker').datepicker();

 // show
 $('#show').click(function(){
  $('#datepicker').datepicker('show');
 });

 // set start date
 $('#setstartdate').click(function(){
  $('#datepicker').datepicker('setStartDate', '-5d');
 });

 // get start date
 $('#getstartdate').click(function(){
  var startDate = $('#datepicker').datepicker('getStartDate');
  $('#response').text('Start Date : ' + startDate);
 });

 // set end date
 $('#setenddate').click(function(){
  $('#datepicker').datepicker('setEndDate', '+5d');
 });

 // get end date
 $('#getenddate').click(function(){
  var startDate = $('#datepicker').datepicker('getEndDate');
  $('#response').text('End Date : ' + startDate);
 });
 
});
</script>

Output

Use buttons to perform an action on the date picker.


 

5. Events

Some events are –

  • show – This triggers when the date picker is displayed.
  • hide – This triggers when the date picker is hidden.
  • changeDate – This triggers when a date is selected or change.
  • changeMonth – This triggers on change of month.
  • changeYear – This triggers on change of year.

Example

$('.datepicker').datepicker().on('show', function(e) {
 console.log('show');
}).on('hide', function(e) {
 console.log('hide');
}).on('changeDate', function(e) {
 console.log('change date');
}).on('changeMonth', function(e) {
 console.log('change month');
}).on('changeYear', function(e) {
 console.log('change year');
});

 

6. Conclusion

If you already using Bootstrap library on your project then you can easily add date picker on the element.

To initialize and customize the picker you can either use data attribute or datepicker() method.

You can learn more about this library from here.

Related Post

Spread the love

Be First to Comment

Leave a Reply

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