-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
135 lines (132 loc) · 5.5 KB
/
index.html
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
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Tempus Dominus Bootstrap 4 Date & Time Picker Examples</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/4.1.1/flatly/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="tempusdominus-bootstrap-4.css" rel="stylesheet" type="text/css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/locale/ja.js" type="text/javascript"></script>
<script src="tempusdominus-bootstrap-4.js"></script>
<style type="text/css">
.datepicker-days th.dow:nth-last-child(2),
.datepicker-days td:nth-last-child(2) {
color: #00f;
}
.datepicker-days th.dow:last-child,
.datepicker-days td:last-child {
color: #f00;
}
</style>
</head>
<body>
</br>
<div class="container">
<div class="row">
<div class="form-group">
<div class="input-group date" id="datetimepicker1" data-target-input="nearest">
<label for="datetimepicker1" class="pt-2 pr-2">日付:</label>
<input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker1" />
<span class="input-group-append" data-target="#datetimepicker1" data-toggle="datetimepicker">
<span class="input-group-text"><i class="fa fa-calendar"></i></span>
</span>
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<div class="input-group date" id="datetimepicker2" data-target-input="nearest">
<label for="datetimepicker2" class="pt-2 pr-2">時間:</label>
<input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker2" />
<span class="input-group-append" data-target="#datetimepicker2" data-toggle="datetimepicker">
<span class="input-group-text"><i class="fa fa-clock-o"></i></span>
</span>
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<div class='input-group' id='datetimepicker3'></div>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker({
yearSuffix: '年',
dayViewHeaderFormat: 'YYYY{0} MMMM',
tooltips: {
close: '閉じる',
selectMonth: '月を選択',
prevMonth: '前月',
nextMonth: '次月',
selectYear: '年を選択',
prevYear: '前年',
nextYear: '次年',
selectTime: '時間を選択',
selectDate: '日付を選択',
prevDecade: '前期間',
nextDecade: '次期間',
selectDecade: '期間を選択',
prevCentury: '前世紀',
nextCentury: '次世紀'
},
format: 'YYYY/MM/DD HH:mm',
locale: 'ja',
firstDay: 1,
buttons: {
showClose: true
}
});
$('#datetimepicker2').datetimepicker({
tooltips: {
close: '閉じる',
pickHour: '時間を取得',
incrementHour: '時間を増加',
decrementHour: '時間を減少',
pickMinute: '分を取得',
incrementMinute: '分を増加',
decrementMinute: '分を減少',
pickSecond: '秒を取得',
incrementSecond: '秒を増加',
decrementSecond: '秒を減少',
togglePeriod: '午前/午後切替',
selectTime: '時間を選択'
},
format: 'HH:mm',
locale: 'ja',
buttons: {
showClose: true
}
});
$('#datetimepicker3').datetimepicker({
yearSuffix: '年',
dayViewHeaderFormat: 'YYYY{0} MMMM',
tooltips: {
close: '閉じる',
selectMonth: '月を選択',
prevMonth: '前月',
nextMonth: '次月',
selectYear: '年を選択',
prevYear: '前年',
nextYear: '次年',
selectDate: '日付を選択',
selectTime: '時間を選択'
},
format: 'YYYY/MM/DD HH:mm',
firstDay: 1,
locale: 'ja',
inline: true,
sideBySide: true,
buttons: {
showClose: true
}
});
});
</script>
</body>
</html>