-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
70 lines (56 loc) · 3.05 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
<!DOCTYPE html>
<html>
<head>
<title>jQuery.timeInput.js Test Page</title>
<style type="text/css">
input, #output {
font-family: "mono"
}
</style>
</head>
<body>
<div id=info>
<b>Test harness for jquery.timeInput.js</b><br/>
Some important information for you:
<br/>
<ul>
<li>All of the strftime() tokens are supported for formatting.</li>
<li>All of the strftime() tokens are supported for user-interaction except for %z and %Z, for two reasons:. <ul><li>Changing the zone doesn't affect the time at all (an internal timestamp), only the display of the time.</li><li>Changing zones and the zone display properly requires having access to the proper tz_data, up-to-date DST boundary tules for the zone. Date() doesn't know about any of this- it exists in your system's locale only, and depending on your locale, your time zone changes depending on the selected time and date. That data can ALSO change over time. Date() doesn't know anything about that.</li><li>There is no workaround in Javascript for the DST-boundary locale problem without including the entire tz database and creating a custom Date() object (beyond the scope of this plugin) or W3C changing the spec for the Date() object and browsers to change locale in the browser window on-the-fly.</li><li><b>Note</b>: these problems are why most web programmers cheap out and put up the three Select
boxes for choosing a date.</li></ul></li>
<li>Tokens in the format of exclaimation-character instead of percent-character are <b>non-interactive replacements</b>. These are tokens that will be replaced according to strftime() rules, but the user won't be able to interact with them.</li>
<li>The input on this page is currently configuredas such: <b>Tab</b> advances tokens in an input, and after the last interactive token will advance to the next focusable input. <b>Enter</b> advances to the next focusable object (like tab normally does).</li>
</ul>
</div>
<table id=testTable width=100% >
<tr><th>Input Content</th><th>Filter Used</th><th>Input</th><th>Value</th></tr>
</table>
<script src="jquery-1.7.1.js"></script>
<script src="jquery.timeInput.js"></script>
<script>
var tests = [
[, {displayFormat:"%m/%d/%y %I:%M %p"}],
["1330322400000",{displayFormat:"%m/%d/%y %I:%M %p"}],
["1330322400000",{displayFormat:"%c",autoResize:true}],
["1330322400000",{displayFormat:"%m/!d/%Y"}],
["2/27/2012 03:00 PM",{displayFormat:"%m/%d/%y %I:%M %p"}]
];
var table = document.getElementById("testTable");
$.each(tests,function(index,test){
var i = $("<input type=text>");
i.val(test[0]);
var row = table.insertRow($("#testTable tr").length);
var cell = row.insertCell(0);
$(cell).append(test[0]);
cell = row.insertCell(1);
$(cell).append(test[1].displayFormat);
cell = row.insertCell(2);
$(cell).append(i);
var cell = row.insertCell(3);
$(i).timeInput(test[1]).change(function(){
$(cell).empty().append( $(i).timeInput( 'value' ) );
});
$(cell).append($(i).timeInput( 'value' ));
});
</script>
</body>
</html>