Beautiful Material Design Date & Time Picker

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