Press "Enter" to skip to content

Custom Material IO Date Picker with pure HTML, CSS | datepicker.js

Custom I/O material date picker with pure HTML, CSS, and js library inspired by Android Material Design date picker component.

custom date picker in android example, android datepicker, android datepickerdialog, android datepicker style programmatically, custom date picker in android github

How to make use of it:

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

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

2. Create a date input on the web 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 accomplished.

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)
}

Android Style Date Picker, Custom Material IO datepicker Plugin/Github, material datepicker android, material datepicker theme android, how to set custom date in datepicker in android


See Demo And Download

Official Website(JoeMartin2001): Click Here

This superior jQuery/javascript plugin is developed by JoeMartin2001. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.