rmp / mdl-datepicker

Material Design Lite Datepicker

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