Author: | ripjar |
---|---|
Views Total: | 50,708 views |
Official Page: | Go to website |
Last Update: | August 14, 2018 |
License: | MIT |
Preview:

Description:
A beautiful, Material Design styled datetime picker component which allows you select date and time from a modal popup. Based on Materialize CSS framework.
How to use it:
Download and include both JavaScript & Stylesheet in your web project like this:
<link rel="stylesheet" href="dist/css/datepicker.css"> <script src="dist/js/datepicker.standalone.js"></script>
Load the required Material Design web font & icon.
<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">
Create a button to toggle the date & time picker.
<a class="c-btn c-datepicker-btn"> <span class="material-icon">Click me</span> </a>
Create an element that will be severed as the container for user picked datetime.
<pre id="output"></pre>
The JavaScript to active the data & time picker.
const picker = new MaterialDatePicker({}) .on('submit', (d) => { output.innerText = d; }); const el = document.querySelector('.c-datepicker-btn'); el.addEventListener('click', () => { picker.open(); }, false);
Full customization opitons.
{ // 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 }
Changelog:
v2.4.0 (08/14/2018)
- ES6