Use material-datepicker.min.js
<script type="text/javascript" src="https://github.com/UgoSansH/mdl-datepicker/raw/master/node_modules/moment/min/moment.min.js"></script>
<script type="text/javascript" src="https://github.com/UgoSansH/mdl-datepicker/raw/master/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="" />
Use datepicker.min.js
<script type="text/javascript" src="https://github.com/UgoSansH/mdl-datepicker/raw/master/node_modules/moment/min/moment.min.js"></script>
<script type="text/javascript" src="https://github.com/UgoSansH/mdl-datepicker/raw/master/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>
Calendar has no dependencies. You can use it without MDL or momentjs.
use calendar.min.js
<script type="text/javascript" src="https://github.com/UgoSansH/mdl-datepicker/raw/master/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>
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 |