Pages UI

Have an account? Sign in

Datepicker

Last updated 6 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>

Form Elements - Previous

Selectbox

Next - Form Elements

Masked Input