Datepicker

PS
Last updated 4 months ago

Datepicker controls in Pages are powered by Bootstrap Datepicker plugin.

Please refer to Bootstrap Datepicker Documentation to learn about plugin options

Step one

Include the stylesheet datepicker3.css inside the <head> if it's not there already.

<link media="screen" type="text/css" rel="stylesheet" href="assets/plugins/bootstrap-datepicker/css/datepicker3.css">

Step two

Include the relevant javascript files inside the <body> before core template script inclusions, if it's not there already. Please view jQuery plugin inclusion guideline rules‚Äč

<script type="text/javascript" src="assets/plugins/bootstrap-datepicker/js/bootstrap-datepicker.js">

Step three

Add the markup

<div id="myDatepicker" class="input-group date">
<input type="text" class="form-control">
<span class="input-group-addon"><i class="fa fa-calendar"></i>
</span>
</div>

Step four

Apply the plugin.

Make sure you place the following script below all the pre-requisites mentioned in the Step two above.

<script>
$(document).ready(function() {
$('#myDatepicker').datepicker();
});
</script>