Datepicker

Pages UI

Search…

Pages UI

v5.0.1 - Pages HTML

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.
1
<link media="screen" type="text/css" rel="stylesheet" href="assets/plugins/bootstrap-datepicker/css/datepicker3.css">
Copied!
Step two
Include the relevant javascript files inside the <body> before core template script inclusions, if it's not there already.
1
<script type="text/javascript" src="assets/plugins/bootstrap-datepicker/js/bootstrap-datepicker.js">
Copied!
Step three
Add the markup
1
<div id="myDatepicker" class="input-group date">
2
    <input type="text" class="form-control">
3
    <span class="input-group-addon"><i class="fa fa-calendar"></i>
4
    </span>
5
</div>
Copied!
Step four
Apply the plugin.
Make sure you place the following script below all the pre-requisites mentioned in the Step two above.
1
<script>
2
$(document).ready(function() {
3
    $('#myDatepicker').datepicker();
4
});
5
</script>
Copied!

Form Elements - Previous

Selectbox

Next - Form Elements

Masked Input

Last modified 2yr ago

Copy link