Красивый дизайн выбора даты
Плагин выбора даты и время в модальном окне с красивым оформлением.
Как использовать:
1. Скачиваем и подключаем плагин
|
1 2 |
<link rel="stylesheet" href="dist/css/datepicker.css"> <script src="dist/js/datepicker.standalone.js"></script> |
2. Подключаем шрифты и иконки
|
1 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. Создаём кнопку вызова окна
|
1 2 3 |
<a class="c-btn c-datepicker-btn"> <span class="material-icon">Click me</span> </a> |
4. Создаём контейнер, в который будет вписываться дата
|
1 |
<pre id="output"></pre> |
5. javascript для активации плагина
|
1 2 3 4 5 6 7 8 9 |
const picker = new MaterialDatePicker({}) .on('submit', (d) => { output.innerText = d; }); const el = document.querySelector('.c-datepicker-btn'); el.addEventListener('click', () => { picker.open(); }, false); |
6. Полный список настроек
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
{ // 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 } |
