demo/datepicker.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Date picker - Ugwa 2</title>
    <meta charset="UTF-8">
    <meta name="description" content="Ugwa 2"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>

    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
    <link rel="stylesheet" href="../css/material-ripple.css">
    <style media="screen">
      body {
        font-size: 0;
        font-family: 'Roboto', sans-serif;
        line-height: 1;
        background-color: #333;
        color: rgba(255, 255, 255, 0.7);
      }
      .datepicker {
        display: inline-block;
        height: 260px;
        overflow: auto;
        resize: vertical;
        font-size: 16px;
        cursor: pointer;
        -webkit-overflow-scrolling: touch;
      }
      .month-name {
        font-size: 24px;
        text-align: center;
        width: 300px;
        margin-bottom: 12px;
      }
      .weekday-names {
        display: flex;
        width: 300px;
        font-size: 18px;
        margin-bottom: 8px;
      }
      .weekday-names span {
        flex: 1 0 0;
        text-align: center;
      }
      .dates {
        fill: currentColor;
      }
      .dates text {
        text-anchor: middle;
        dominant-baseline: central;
      }
      .month-highlights path {
        fill: transparent;
        transition: fill .2s;
      }
      .month-highlights path.highlight {
        fill: rgba(255, 255, 255, 0.1);
      }
      .selected {
        r: 20;
        stroke: #f44336;
        fill: none;
        stroke-width: 2;
      }
      button {
        background-color: #f44336;
        border-radius: 2px;
        font-weight: bold;
        border: none;
        color: white;
        font-size: 16px;
        padding: 10px 15px;
      }
      button:focus {
        outline: none;
      }
      material-ripple {
        background-color: rgba(255, 255, 255, 0.32);
      }
    </style>

    <script src="../js/datepicker.js" charset="utf-8"></script>
    <script src="../js/material-ripple.js" charset="utf-8"></script>
  </head>
  <body>
    <div class="month-name"></div>
    <div class="weekday-names">
      <span>S</span>
      <span>M</span>
      <span>T</span>
      <span>W</span>
      <span>Θ</span>
      <span>F</span>
      <span>S</span>
    </div>
    <div class="datepicker" tabindex="0"></div>
    <div><button data-ripple>GO</button></div>

    <script type="text/javascript">
      const months = ['January',   'February', 'March',    'April',
                      'May',       'June',     'July',     'August',
                      'September', 'October',  'November', 'December'];

      const pickerWrapper = document.querySelector('.datepicker');
      const monthName = document.querySelector('.month-name');
      const picker = new DatePicker(pickerWrapper, {
        weekStart: 0,
        width: 300,
        range: [new Date(2018, 7, 13), new Date(2019, 4, 31)],
        noUnselected: true,
        changeMonthLabel(year, month) {
          monthName.textContent = months[month] + ' ' + year;
        }
      });
    </script>
  </body>
</html>