Красивый дизайн выбора даты

Плагин выбора даты и время в модальном окне с красивым оформлением.

Как использовать:

1. Скачиваем и подключаем плагин

<link rel="stylesheet" href="dist/css/datepicker.css">
<script src="dist/js/datepicker.standalone.js"></script>

2. Подключаем шрифты и иконки

<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

3. Создаём кнопку вызова окна

<a class="c-btn c-datepicker-btn">
  <span class="material-icon">Click me</span>
</a>

4. Создаём контейнер, в который будет вписываться дата

<pre id="output"></pre>

5. javascript для активации плагина

const picker = new MaterialDatePicker({})
  .on('submit', (d) => {
    output.innerText = d;
  });

const el = document.querySelector('.c-datepicker-btn');
el.addEventListener('click', () => {
  picker.open();
}, false);

6. Полный список настроек

{
    // element to attach the datepicker. this element will receive 
    // events when the data changes. If an input element, will be 
    // populated with formatted date and time chosen
    el: document.querySelector('.c-datepicker-btn'),
    // if `el` is set, `openedBy` is the event on `el` that will
    // open the picker, eg. `click` or `focus`
    openedBy: 'focus',
    // if `el` is set, the format used to display the datetime in the input, // or set as a data attribute
    format: 'dd/MM/YY', 
    //  the default value of the picker
    default: moment(),
    // the container to append the picker
    container: document.body,    
    // cosmetic classes that can be overriden
    // mostly used for styling the calendar
    styles: {
        scrim: 'c-scrim',
        back: 'c-datepicker__back',
        container: 'c-datepicker__calendar',
        date: 'c-datepicker__date',
        dayBody: 'c-datepicker__days-body',
        dayBodyElem: 'c-datepicker__day-body',
        dayConcealed: 'c-datepicker__day--concealed',
        dayDisabled: 'c-datepicker__day--disabled',
        dayHead: 'c-datepicker__days-head',
        dayHeadElem: 'c-datepicker__day-head',
        dayRow: 'c-datepicker__days-row',
        dayTable: 'c-datepicker__days',
        month: 'c-datepicker__month',
        next: 'c-datepicker__next',
        positioned: 'c-datepicker--fixed',
        selectedDay: 'c-datepicker__day--selected',
        selectedTime: 'c-datepicker__time--selected',
        time: 'c-datepicker__time',
        timeList: 'c-datepicker__time-list',
        timeOption: 'c-datepicker__time-option',
        clockNum: 'c-datepicker__clock__num'
    },
    // date range to allow (see rome validator factories)
    dateValidator: null       
}