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

Простой плагин позволяющий реализовать выбор даты (как на скриншоте).

Как использовать:
1. Подключаем стили CSS
<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>
3. Подключаем плагин:
<script src="js/moment.js"></script>
<script src="js/md-date-time-picker.js"></script>

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

var myDatepicker = new mdDateTimePicker('date');
5. Переключение выбора даты
document.getElementById('trigger').addEventListener('click', function() {
  myDatepicker.toggle();
});
6. Настройки для mdDateTimePicker() function.

type: [type of dialog] [‘date’,’time’]
init = moment(): [initial value for the dialog date or time, defaults to today] [@default value of today]
past = moment(): [the past moment till which the calendar shall render] [@default value of exactly 21 Years ago from init]
future = moment(): [the future moment till which the calendar shall render] [@default value of init]
mode = false: [this value tells whether the time dialog will have the 24 hour mode (true) or 12 hour mode (false)] [@default 12 hour mode – false]

delux

Предлагаю делиться опытом в сфере сайтостроения!

Читайте также:

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.