Pages UI
Search…
Pages UI
v5.0.1 - Pages HTML
Getting Started
Introduction
Layouts
Themes
Sass
Content
Apps
Calendar
Social
Email
API Reference
UI Elements
Color
Typopgrahy
Icons
Buttons
Notifications
Modals
Progressbar
Collapse
Tabs
Sliders
Treeview
Nestable
Form Elements
Checkboxes and Radio
Toggle
Typehead
Selectbox
Datepicker
Masked Input
Autonumeric
Quill Editor
Tags Input
File Upload
Form Layouts
Form Validation
Form Wizard
Charts
Maps
Google Maps
Vector Maps
Tables
Cards
Timeline
Views
Grid
Helpers
Troubleshooting
Browser Support
Change log
Legacy Docs
Other
Grunt
Gulp
Rails
Powered By
GitBook
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