Date Time Picker — выбор даты
Простой плагин позволяющий реализовать выбор даты (как на скриншоте).
Как использовать:
1. Подключаем стили CSS
|
1 |
<link rel="stylesheet" href="css/component.css"> |
2. Окно выбора даты
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 |
<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. Подключаем плагин:
|
1 2 |
<script src="js/moment.js"></script> <script src="js/md-date-time-picker.js"></script> |
4. Инициализировать выбор даты
|
1 |
var myDatepicker = new mdDateTimePicker('date'); |
5. Переключение выбора даты
|
1 2 3 |
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]
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]
