summaryrefslogtreecommitdiff
path: root/www/lib/ion-datetime-picker/src/picker-popup.html
blob: df1e3646aaf56f7fc3aa115403dc1262ed9d2d23 (plain)
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
<div class="ion-datetime-picker">
    <div ng-if-start="dateEnabled" class="row month-year">
        <div class="col col-10 left-arrow">
            <button class="button button-small button-positive button-clear icon ion-chevron-left" ng-click="changeBy(-1, 'month')"></button>
        </div>
        <label class="col col-50 month-input">
            <div class="item item-input item-select">
                <select ng-model="bind.month" ng-options="index as month for (index, month) in i18n.months" ng-change="change('month')"></select>
            </div>
        </label>
        <label class="col year-input">
            <div class="item item-input">
                <input type="number" ng-model="bind.year" min="1900" max="2999" ng-change="change('year')" ng-blur="changed()" required>
            </div>
        </label>
        <div class="col col-10 right-arrow">
            <button class="button button-small button-positive button-clear icon ion-chevron-right" ng-click="changeBy(+1, 'month')"></button>
        </div>
    </div>

    <div class="row calendar weekdays">
        <div class="col" ng-repeat="weekday in weekdays">
            <div class="weekday">{{i18n.weekdays[weekday]}}</div>
        </div>
    </div>
    <div ng-if-end class="row calendar days" ng-repeat="y in rows">
        <div class="col" ng-repeat="x in cols">
            <div ng-show="(cellDay = y * 7 + x - firstDay) > 0 && cellDay <= daysInMonth" ng-click="changeDay(cellDay)" class="day" ng-class="{'selected': cellDay === day, 'today': cellDay === today.day && month === today.month && year === today.year}">{{cellDay}}</div>
        </div>
    </div>

    <div ng-if-start="timeEnabled" class="row time-buttons">
        <div class="col"></div>
        <div class="col-20"><button class="button button-positive button-clear icon ion-chevron-up" ng-click="changeBy(+1, 'hour')"></button></div>
        <div class="col"></div>
        <div class="col-20"><button class="button button-positive button-clear icon ion-chevron-up" ng-click="changeBy(+1, 'minute')"></button></div>
        <div ng-if-start="secondsEnabled" class="col"></div>
        <div ng-if-end class="col-20"><button class="button button-positive button-clear icon ion-chevron-up" ng-click="changeBy(+1, 'second')"></button></div>
        <div ng-if-start="meridiemEnabled" class="col"></div>
        <div ng-if-end class="col-20"><button class="button button-positive button-clear icon ion-chevron-up" ng-click="changeBy(+12, 'hour')"></button></div>
        <div class="col"></div>
    </div>
    <div class="row time">
        <div class="col"></div>
        <label class="col col-20">
            <div class="item item-input">
                <input type="text" ng-model="bind.hour" pattern="0?([01]?[0-9]|2[0-3])" ng-change="change('hour')" ng-blur="changed()" required>
            </div>
        </label>
        <div class="col colon">:</div>
        <label class="col col-20">
            <div class="item item-input">
                <input type="text" ng-model="bind.minute" pattern="0?[0-5]?[0-9]" ng-change="change('minute')" ng-blur="changed()" required>
            </div>
        </label>
        <div ng-if-start="secondsEnabled" class="col colon">:</div>
        <label ng-if-end class="col col-20">
            <div class="item item-input">
                <input type="text" ng-model="bind.second" pattern="0?[0-5]?[0-9]" ng-change="change('second')" ng-blur="changed()" required>
            </div>
        </label>
        <div ng-if-start="meridiemEnabled" class="col"></div>
        <label ng-if-end class="col col-20">
            <div class="item item-input">
                <input type="text" ng-model="bind.meridiem" pattern="[aApP][mM]" ng-change="change('meridiem')" ng-blur="changed()" required>
            </div>
        </label>
        <div class="col"></div>
    </div>
    <div ng-if-end class="row time-buttons">
        <div class="col"></div>
        <div class="col-20"><button class="button button-positive button-clear icon ion-chevron-down" ng-click="changeBy(-1, 'hour')"></button></div>
        <div class="col"></div>
        <div class="col-20"><button class="button button-positive button-clear icon ion-chevron-down" ng-click="changeBy(-1, 'minute')"></button></div>
        <div ng-if-start="secondsEnabled" class="col"></div>
        <div ng-if-end class="col-20"><button class="button button-positive button-clear icon ion-chevron-down" ng-click="changeBy(-1, 'second')"></button></div>
        <div ng-if-start="meridiemEnabled" class="col"></div>
        <div ng-if-end class="col-20"><button class="button button-positive button-clear icon ion-chevron-down" ng-click="changeBy(-12, 'hour')"></button></div>
        <div class="col"></div>
    </div>
</div>