Datepicker

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.

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

PreviousSelectbox NextMasked Input

Last updated 4 years ago