JarCastingMaterial Datetime Picker
A Material Design date/time picker modal, built for the web. Works well with Materialize, or standalone.
https://ripjar.github.io/material-datetime-picker/
Installation
npm install material-datetime-picker
Dependencies
The picker depends on Google's Material Design icons (packaged with Materialize), or included in the head of the document;
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
For best results also include Google's Material Font Roboto;
<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
If you want to use this project as a standalone <script>, you can use dist/material-datetime-picker.js. You'll need to include moment.js and rome.js as well:
<script src="https://cdnjs.cloudflare.com/ajax/libs/rome/2.1.22/rome.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.js"></script>
<script src="material-datetime-picker.js" charset="utf-8"></script>
Usage
Manual (recommended)
The picker can be instantiated and interacted with manally;
import MaterialDateTimePicker from 'material-datetime-picker';
const picker = new MaterialDateTimePicker()
.on('submit', (val) => console.log(`data: ${val}`))
.on('open', () => console.log('opened'))
.on('close', () => console.log('closed'));
document.querySelector('.c-datepicker-btn')
.on('click', () => picker.open());
As form input
The picker is decoupled from any single form element for simplicity. However, it should be simple to link the picker to a form input or button. For instance, given the input element <input class="c-datepicker-input" />, the following could be written;
import MaterialDateTimePicker from 'material-datetime-picker';
const input = document.querySelector('.c-datepicker-input');
const picker = new MaterialDateTimePicker()
.on('submit', (val) => {
input.value = val.format("DD/MM/YYYY");
});
input.addEventListener('focus', () => picker.open());
Options
All options are optional, including the el.
{
// DOM 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` must be a DOM Element object. Selectpr strings or wrappers
// like a jQuery selection are not supported.
el: document.querySelector('.c-datepicker-btn'),
// if `el` is set, the format used to display the datetime in the input,
format: 'DD/MM/YY',
// the default value of the picker
default: moment(),
// the container to append the picker. If you change this, you need to make
// sure your element has a z-index > 0 so that it displays in front of the scrim.
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
}
License
MIT
