Use Datepicker

1. With 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. epepite 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

var datepicker = new epepite.DatePicker.DatePicker({
    'input' : '(string selector or HTMLElement)'
});
                    
3. Use independent calendar

Calendar has no dependencies. You can use it without MDL or momentjs

Selected date :

Use calendar.min.js

<script type="text/javascript" src="node_modules/epepite-datepicker/dist/calendar.min.js"></script>  
                    

Create Calendar instance


    var calendar = new epepite.DatePicker.Calendar({
        'container' : document.querySelector('#CalendarContainer'),
        'min_date'  : new Date(),
        'max_date'  : new Date(2016, 7, 15)
    });

    calendar.on('date_update', function(event) {
        document.querySelector('.current-date').innerHTML = moment(event.detail.date).format('DD/MM/YYYY');
    });
                

Options

HTMLElement attributes
Name Type Default Description
data-pattern string DD/MM/YYYY A momentjs valid pattern
data-min string NULL Min date. Use momentjs pattern.
data-max string NULL Max date. Use momentjs pattern.
epepite.DatePicker.DatePicker
Name Type Default Description
input string selector or HTMLElement NULL Required options.
min_date Date NULL Min date
container string selector or HTMLElement NULL Max Date
format string DD/MM/YY A momentjs valid pattern
epepite.DatePicker.Calendar
Name Type Default Description
container string selector or HTMLElement NULL Required options.
min_date Date NULL Min date
container string selector or HTMLElement NULL Max Date