Android Style Date Picker With Plain JavaScript – m-datepicker.js

Preview:

Description:

A minimal date picker JavaScript library inspired by the Android Material Design datepicker component.

How to use it:

1. Include the following JS & CSS files on the page.

<link rel="stylesheet" href="styles/style.css" />
<script src="m-datepicker.js"></script>

2. Create a date input on the page.

<input type="text" class="date-input" />

3. Create the HTML for the date picker interface.

<div class="m-datepicker-overlay">
  <div class="m-datepicker">
    <div class="m-datepicker-header">
      <small>SELECT DATE</small>
      <div>
        <p class="m-datepicker-status">
          <span>Mon</span>,
          <span>Nov 17</span>
        </p>
        <button>
          <img src="icons/edit.png" alt="pencil">
        </button>
      </div>
    </div>
    <div class="m-datepicker-body">
    </div>
    <div class="m-datepicker-footer">
      <button class="m-datepicker-cancel">Cancel</button>
      <button class="m-datepicker-ok">Ok</button>
    </div>
  </div>
</div>

4. Enable the date picker and done.

const select = (selector, Boolean = false) => Boolean ? document.querySelectorAll(selector) : document.querySelector(selector)
const weekdays = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thirsday', 'Friday', 'Sunday']
const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
function daysInMonth (month, year) {
  return new Date(year, ++month, 0).getDate();
}
function getDay(year, month, day) {
  const d = new Date(year, month, day);
  return weekdays[d.getDay()];
}
select('.date-input').onfocus = (e) => {
  new DatePicker(e.target)
}