-
Notifications
You must be signed in to change notification settings - Fork 0
/
timesplitter_demo.html
84 lines (67 loc) · 4.74 KB
/
timesplitter_demo.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
<!doctype html>
<head>
<title>timesplitter.js Demo</title>
<style type="text/css">
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
ol, ul { list-style: none; }
code { font-family: Consolas, "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", Courier, monospace; }
h1 { font-size: 24px; font-weight: 600; }
h2 { font-size: 18px; font-weight: 600; margin-top: 2em; }
body { background: #e5ebfe; font: 14px helvetica, arial, sans-serif; width: 600px; margin: 0 auto; padding-top: 2em; }
p { margin: 1em 0; line-height: 1.5em; }
.timesplitter_error { background: #ffd6d5; border: 1px solid #a00; }
a { color: #0c038a; text-decoration: none; }
dl { margin: 1.5em 0; }
dt { font-weight: 600; padding: 5px 8px; margin-top: 1em; }
dd { background: #c0d2f7; padding: 5px 8px; }
</style>
</head>
<body>
<h1>timesplitter.js</h1>
<p style="font-style:italic;">A jQuery plugin for simplifying time inputs.</p>
<p>Timesplitter was originally developed as a UI improvement to the text inputs generated by Django's <a href="https://docs.djangoproject.com/en/dev/ref/forms/widgets/#django.forms.TimeInput" target="_blank">TimeInput widgets</a>, but it is useful anywhere you need an unobtrusive, degradable way to improve a time input. It is fully styleable using CSS and requires only the use of <a href="http://jquery.com" target="_blank">jQuery</a>.</p>
<h2>Demo</h2>
<p>Below is a regular text input, with timesplitter applied to it. The original input is hidden and replaced with a simple set of 'hours', 'minutes', and 'am/pm' inputs. Behind the scenes the original input is live-updated to match the UI inputs, so your form can be sent as normal.</p>
<p><input type="text" class="time_input" value="12:00" /></p>
<p style="font-size: 16px;">Original input is set to: <span id="time_readout">12:00</span></p>
<h2>Features</h2>
<p>If the input has a valid time value when timesplitter is assigned to it, that time will also be displayed in the timesplitter widget upon rendering.</p>
<p>A class of "timesplitter_error" is given to invalid fields once a user begins to interact with the widget.</p>
<p>If timesplitter is used on a text input with the "required" attribute set, the new form elements will also have the "required" attribute set on them.</p>
<h2>Using timesplitter</h2>
<dl>
<dt>Requirements:</dt>
<dd>jQuery (tested with 1.5.2+)</dd>
<dt>Example HTML:</dt>
<dd><code><input type="text" class="time_input" value="12:30" /></code></dd>
<dt>Example Validation CSS:</dt>
<dd><code>.timesplitter_error { background: #ffd6d5; border: 1px solid #a00; }</code></dd>
<dt>Example Javascript embed - to be placed after your jQuery embed:</dt>
<dd><code>$(".time_input").timesplitter();</code></dd>
<dt>Example Javascript - to be placed in your <code>$(document).ready</code>:</dt>
<dd><code><script src='js/timesplitter.js'></script></code></dd>
</dl>
<br /><br /><br />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.js"></script>
<script>window.jQuery || document.write("<script src='js/jquery-1.5.2.min.js'>\x3C/script>")</script>
<script src='js/timesplitter.js'></script>
<script>
$(document).ready(function(){
// apply timesplitter to DOM elements
$(".time_input").timesplitter();
// (code below is for this demo ONLY, do not copy this
// into your own code)
$(".timesplitter_hour, .timesplitter_minute").live("keyup", function(t){
var time = $(".time_input").val();
$("#time_readout").html(time);
});
$(".timesplitter_ampm").live("change", function(t){
var time = $(".time_input").val();
$("#time_readout").html(time);
});
});
</script>
</body>
</html>