forked from loebi-ch/jquery-clock-timepicker
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
121 lines (121 loc) · 5.48 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
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<title>jQuery Clock Time Picker</title>
<script type="text/javascript" src="node_modules/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="jquery-clock-timepicker.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.standard').clockTimePicker();
$('.required').clockTimePicker({required:true});
$('.separatorTime').clockTimePicker({separator:'.'});
$('.precisionTime5').clockTimePicker({precision:5});
$('.precisionTime10').clockTimePicker({precision:10});
$('.precisionTime15').clockTimePicker({precision:15});
$('.precisionTime30').clockTimePicker({precision:30});
$('.precisionTime60').clockTimePicker({precision:60});
$('.simpleTime').clockTimePicker({onlyShowClockOnMobile:true});
$('.duration').clockTimePicker({duration:true, maximum:'80:00'});
$('.durationNegative').clockTimePicker({duration:true, durationNegative:true});
$('.durationMinMax').clockTimePicker({duration:true, minimum:'1:00', maximum:'5:30'});
$('.durationNegativeMinMax').clockTimePicker({duration:true, durationNegative:true, minimum:'-5:00', maximum:'5:00', precision:5});
});
</script>
<style type="text/css">
h1 { font-size: 20px; margin-bottom:3px; }
h2 { margin-top: 40px; margin-bottom:3px; }
h3 { font-size: 13px; margin-top:0px; }
.main { text-align: center; }
.example { margin-bottom: 25px; }
.example table { width: 650px; margin: 0px auto; }
@media (max-width: 650px) {
.example table { width: 100%; }
.example td { display: block; text-align: center; }
}
.time { display:inline-block; font-size:26px; padding:5px; text-align:center; width:94px; margin-top:5px; }
</style>
</head>
<body>
<div class="main">
<h1>jQuery Clock Time Picker v2.3.5</h1>
<h3>NPM package "jquery-clock-timepicker"</h3>
<p>A free jQuery Plug-in to select the time with a clock inspired by the Android time picker. This plugin works on Desktop and Mobile phones.</p>
<p>Install with NPM or download it directly from GitHub:<br /><a href="https://github.com/loebi-ch/jquery-clock-timepicker" target="_blank">https://github.com/loebi-ch/jquery-clock-timepicker</a></p>
<p>The manual can be found on <a href="https://github.com/loebi-ch/jquery-clock-timepicker/blob/master/README.md" target="_blank">GitHub</a>.</p>
<h2>Examples</h2>
<h3>(with the most important settings. Of course, you can combine these different settings...)</h3>
<p class="example">
<strong>Standard time picker</strong><br />
<i>(no settings specified)</i><br />
<input class="time standard" type="text" value="10:15" onchange="console.log('Time changed to: ' + this.value)" />
</p>
<p class="example">
<strong>Required time picker</strong><br />
<i>{ required: true }</i><br />
<input class="time required" type="text" value="08:45" />
</p>
<p class="example">
<strong>Time picker with different separator</strong><br />
<i>{ seperator: '.' }</i><br />
<input class="time separatorTime" type="text" value="18.45" />
</p>
<p class="example">
<strong>Time picker with precision</strong><br />
<table>
<tr>
<td>
<i>{ precision: 5 }</i><br />
<input class="time precisionTime5" type="text" value="06:00" />
</td>
<td>
<i>{ precision: 10 }</i><br />
<input class="time precisionTime10" type="text" value="07:10" />
</td>
<td>
<i>{ precision: 15 }</i><br />
<input class="time precisionTime15" type="text" value="08:15" />
</td>
<td>
<i>{ precision: 30 }</i><br />
<input class="time precisionTime30" type="text" value="09:30" />
</td>
<td>
<i>{ precision: 60 }</i><br />
<input class="time precisionTime60" type="text" value="10:00" />
</td>
</tr>
</table>
</p>
<p class="example">
<strong>Time picker - show clock picker only on mobile phones</strong><br />
<i>{ onlyShowClockOnMobile: true }</i><br />
<input class="time simpleTime" type="text" value="22:00" />
</p>
<p class="example">
<strong>Duration picker</strong><br />
<i>{ duration: true, maximum: '80:00' }</i><br />
<input class="time duration" type="text" value="18:30" />
</p>
<p class="example">
<strong>Duration picker that allows to select negative durations</strong><br />
<i>{ duration: true, durationNegative: true }</i><br />
<input class="time durationNegative" type="text" value="-1:10" />
</p>
<p class="example">
<strong>Duration picker with minimum and maximum</strong><br />
<i>{ duration: true, minimum: '1:00', maximum: '5:30' }</i><br />
<input class="time durationMinMax" type="text" value="2:30" />
</p>
<p class="example">
<strong>Negative duration picker with minimum and maximum</strong><br />
<i>{ duration: true, durationNegative: true, minimum: '-5:00', maximum: '5:00', precision: 5 }</i><br />
<input class="time durationNegativeMinMax" type="text" value="-2:00" />
</p>
<p>
Find more settings in the README on <a href="https://github.com/loebi-ch/jquery-clock-timepicker/blob/master/README.md" target="_blank">GitHub</a>.<br />
If you miss settings, please feel free to submit a <a href="https://github.com/loebi-ch/jquery-clock-timepicker/issues/new" target="_blank">GitHub issue request</a>.
</p>
</div>
</body>
</html>