Material DatePicker
1. epepite Material Design Lite
Use material-datepicker.min.js
<script type="text/javascript" src="node_modules/moment/min/moment.min.js"></script>
<script type="text/javascript" src="node_modules/epepite-datepicker/dist/material-datepicker.min.js"></script> Just add mdl-datepicker__input class from your node
<input class="mdl-datepicker__input" type="text" id="date-input" value="" />
2. Use without Material Design Lite
Use datepicker.min.js
<script type="text/javascript" src="node_modules/moment/min/moment.min.js"></script>
<script type="text/javascript" src="node_modules/epepite-datepicker/dist/datepicker.min.js"></script> Create DatePicker instance
<script type="text/javascript"
var datepicker = new epepite.DatePicker.DatePicker({
'input' : '(string selector or HTMLElement)'
});
</script>3. Use independent Calendar
Calendar has no dependencies. You can use it without MDL or momentjs.
use calendar.min.js
<script type="text/javascript" src="node_modules/epepite-datepicker/dist/calendar.min.js"></script> Create Calendar instance
<div id="CalendarContainer"></div>
<script type="text/javascript"
var calendar = new epepite.DatePicker.Calendar({
'container' : document.querySelector('#CalendarContainer'),
'min_date' : new Date(),
'max_date' : new Date(2016, 11, 15)
});
calendar.on('date_update', function(event) {
document.querySelector('.current-date').innerHTML = moment(event.detail.date).format('DD/MM/YYYY');
});
</script>Options
HTMlElement attributes
| Name | Type | Default | Description |
|---|---|---|---|
| data-pattern | string | DD/MM/YYYY | A momentjs valid pattern |
| data-min | string | NULL | Date min. Use momentjs pattern |
| data-max | string | NULL | Date max.Use momentjs pattern |
epepite.DatePicker.DatePicker
| Name | Type | Default | Description |
|---|---|---|---|
| input | string or HTMLElement | DD/MM/YYYY | A momentjs valid pattern |
| min_date | Date | NULL | Date min |
| max_date | Date | NULL | Date max |
| format | string | DD/MM/YYYY | A momentjs pattern |
epepite.DatePicker.Calendar
| Name | Type | Default | Description |
|---|---|---|---|
| container | string or HTMLElement | DD/MM/YYYY | A momentjs valid pattern |
| min_date | Date | NULL | Date min |
| max_date | Date | NULL | Date max |
