Date Time Picker — выбор даты

<link rel="stylesheet" href="css/component.css">

2. Окно выбора даты

<div id="md-picker__date" class="md-picker md-picker-date md-picker--inactive animated">
  <div id="md-date__header" class="md-picker__header">
    <h4 id="md-date__subtitle" class="md-picker__subtitle"></h4>
    <h2 id="md-date__title" class="md-picker__title">
      <span id="md-date__titleDay"></span>
      <span id="md-date__titleMonth"></span>
    </h2>
  </div>
  <div class="md-picker__body">
    <div id="md-date__viewHolder" class="md-picker__viewHolder animated">
      <ul class="md-picker__views">
        <li id="md-date__previous" class="md-picker__view">
          <div class="md-picker__month"></div>
          <div class="md-picker__grid">
            <div class="md-picker__th">
              <span>
                S
              </span>
              <span>
                M
              </span>
              <span>
                T
              </span>
              <span>
                W
              </span>
              <span>
                T
              </span>
              <span>
                F
              </span>
              <span>
                S
              </span>
            </div>
            <div class="md-picker__tr"></div>
          </div>
        </li>
        <li id="md-date__current" class="md-picker__view">
          <div class="md-picker__month"></div>
          <div class="md-picker__grid">
            <div class="md-picker__th">
              <span>
                S
              </span>
              <span>
                M
              </span>
              <span>
                T
              </span>
              <span>
                W
              </span>
              <span>
                T
              </span>
              <span>
                F
              </span>
              <span>
                S
              </span>
            </div>
            <div class="md-picker__tr"></div>
          </div>
        </li>
        <li id="md-date__next" class="md-picker__view">
          <div class="md-picker__month"></div>
          <div class="md-picker__grid">
            <div class="md-picker__th">
              <span>
                S
              </span>
              <span>
                M
              </span>
              <span>
                T
              </span>
              <span>
                W
              </span>
              <span>
                T
              </span>
              <span>
                F
              </span>
              <span>
                S
              </span>
            </div>
            <div class="md-picker__tr"></div>
          </div>
        </li>
      </ul>
      <button id="md-date__left" class="md-button md-picker__left" type="button"></button>
      <button id="md-date__right" class="md-button md-picker__right" type="button"></button>
    </div>
    <ul id="md-date__years" class="md-picker__years md-picker__years--invisible animated"></ul>
    <div class="md-picker__action">
      <button id="md-date__cancel" class="md-button" type="button">cancel</button>
      <button id="md-date__ok" class="md-button" type="button">ok</button>
    </div>
  </div>
</div>

<script src="js/moment.js"></script>
<script src="js/md-date-time-picker.js"></script>

4. Инициализировать выбор даты

var myDatepicker = new mdDateTimePicker('date');

document.getElementById('trigger').addEventListener('click', function() {
  myDatepicker.toggle();
});