Include the files
...
<!-- or another theme from `dist/css` -->
<link rel="stylesheet" href="datepicker.material.css">
<script src="datepicker.js"></script>
...
Distinguish the Datepickers
<input type="text" id="datepicker">
Initialize Datepicker.js
var datepicker = new Datepicker('#datepicker');
Called on an input with no options.
var simple = new Datepicker('#simple');
Select multiple dates. Click & drag to toggle a range of dates.
var multi = new Datepicker('#multi', {
multiple: true
});
Set to inline on hidden inputs.
var ranged = new Datepicker('#ranged', {
inline: true,
ranged: true,
time: true
});
Data attributes override options.
var constrained = new Datepicker('#constrained', {
// 10 days in the past
min: (function(){
var date = new Date();
date.setDate(date.getDate() - 10);
return date;
})(),
// 10 days in the future
max: (function(){
var date = new Date();
date.setDate(date.getDate() + 10);
return date;
})()
});
Alter templates & add classNames for custom styles.
.datepicker.custom {
display: block;
}
.datepicker.custom table th {
color: #888;
}
.datepicker.custom .datepicker__wrapper {
background: #333;
width: 100%;
padding: 0;
}
.datepicker.custom .datepicker__pane {
float: left;
width: 33.333%;
padding: 0.5rem;
}
.datepicker.custom .datepicker__pane:not(:first-child) .datepicker__prev,
.datepicker.custom .datepicker__pane:not(:last-child) .datepicker__next {
display: none;
}
.datepicker.custom .datepicker__day div:hover,
.datepicker.custom .datepicker__day.is-highlighted:not(.is-selected) div {
background: #444;
}
.datepicker.custom .datepicker__daynum {
color: white;
}
.datepicker.custom .datepicker__day.is-selected div:hover {
background: #2196F3;
}
.datepicker.custom .datepicker__day.is-disabled.is-selected div,
.datepicker.custom .datepicker__day.is-otherMonth.is-selected div,
.datepicker.custom .datepicker__day.is-disabled.is-selected + .is-selected div::before,
.datepicker.custom .datepicker__day.is-otherMonth.is-selected + .is-selected div::before {
background: #444;
}
.datepicker.custom .datepicker__day.is-disabled .datepicker__daynum,
.datepicker.custom .datepicker__day.is-otherMonth .datepicker__daynum {
color: #444;
}
.datepicker.custom .datepicker__day.is-disabled.is-selected .datepicker__daynum,
.datepicker.custom .datepicker__day.is-otherMonth.is-selected .datepicker__daynum {
color: rgba(255,255,255,0.1);
}
var custom = new Datepicker('#custom', {
multiple: true,
inline: true,
classNames: {
node: 'datepicker custom'
},
templates: {
container: [
'<div class="datepicker__container">',
'<% for (var i = -1; i <= 1; i++) { %>',
'<div class="datepicker__pane">',
'<%= renderHeader(i) %>',
'<%= renderCalendar(i) %>',
'</div>',
'<% } %>',
'</div>'
].join('')
}
});
true|false
true|false
true|false
true|false|"ranged"
Date|"first"|"last"|"today"
Date|false
[Date...]|false
[Date...]|false
Integer
Integer
Object|Array
String
(Date) => String
(String) => Date