Ticket #5776: test_TimeTextBox.html

File test_TimeTextBox.html, 5.4 kB (added by bill, 3 months ago)

modified version of test_TimeTextBox.html that shows problem on FF2/win (but not FF2/mac or IE6)

Line 
1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
2        "http://www.w3.org/TR/html4/strict.dtd">
3<html>
4        <head>
5                <title>Test TimeTextBox Widget</title>
6
7                <style type="text/css">
8                        @import "../../../dojo/resources/dojo.css";
9                        @import "../css/dijitTests.css";
10
11                        .testExample {
12                                background-color:#fbfbfb;
13                                padding:1em;
14                                margin-bottom:1em;
15                                border:1px solid #bfbfbf;
16                        }
17
18                        .noticeMessage {
19                                color:#093669;
20                                font-size:0.95em;
21                                margin-left:0.5em;
22                        }
23
24                        .dojoTitlePaneLabel label {
25                                font-weight:bold;
26                        }
27                </style>
28               
29                <!-- required: the default dijit theme: -->
30                <link id="themeStyles" rel="stylesheet" href="../../../dijit/themes/tundra/tundra.css" />
31
32                <!-- required: dojo.js -->
33                <script type="text/javascript" src="../../../dojo/dojo.js"
34                        djConfig="isDebug: false, parseOnLoad: true"></script>
35
36                <!-- only needed for alternate theme testing: -->
37                <script type="text/javascript" src="../_testCommon.js"></script>
38
39                <script type="text/javascript">
40                        dojo.require("dijit.dijit"); // optimize: load dijit layer
41                        dojo.require("dijit.form.TextBox");
42                        dojo.require("dijit.form.ValidationTextBox");
43                        dojo.require("dijit.form.NumberTextBox");
44                        dojo.require("dijit.form.CurrencyTextBox");
45                        dojo.require("dijit.form.DateTextBox");
46                        dojo.require("dijit.form.TimeTextBox");
47                        dojo.require("dojo.currency");
48                        dojo.require("dojo.date.locale");
49                        dojo.require("dojo.parser");    // scan page for widgets and instantiate them
50                </script>
51        </head>
52
53        <body class="tundra">
54        <center>
55                <h1 class="testTitle">Test TimeTextBox Widget</h1>
56                <!--    to test form submission, you'll need to create an action handler similar to
57                        http://www.utexas.edu/teamweb/cgi-bin/generic.cgi -->
58                <form id="form1" action="" name="example" method="">
59
60        <div class="dojoTitlePaneLabel">
61                <label for="q1">Time using local conventions with seconds</label>
62                <span class="noticeMessage">TimeTextBox class,
63                        Attributes: {formatLength:'medium'}</span>
64        </div>
65        <div class="testExample">
66                <input id="q1" type="text" name="time1" value="T17:45:00"
67                        dojoType="dijit.form.TimeTextBox"
68                        constraints="{formatLength:'medium'}"
69                        required="true"
70                        onChange="dojo.byId('oc1').value=arguments[0]"
71                        invalidMessage="Invalid time." />
72                onChange:<input id="oc1" size="34" disabled value="not fired yet!" autocomplete="off">
73        </div>
74
75        <div class="dojoTitlePaneLabel">
76                <label for="q2">Time using local conventions without seconds, required, no invalid message tooltip</label>
77                <span class="noticeMessage">TimeTextBox class,
78                        Attributes: {formatLength:'short'}</span>
79        </div>
80        <div class="testExample">
81                <input id="q2" type="text" name="time1a" value="T17:45:00"
82                        dojoType="dijit.form.TimeTextBox"
83                        constraints="{formatLength:'short'}"
84                        required="true"
85                        invalidMessage="" />
86        </div>
87
88        <div class="dojoTitlePaneLabel">
89                <label for="q3"> 12 Hour Time </label>
90                <span class="noticeMessage">TimeTextBox class,
91                        Attributes: {timePattern:'h:mm:ss a'}</span>
92        </div>
93        <div class="testExample">
94                <input id="q3" type="text" name="time1b" value="T17:45:00"
95                        dojoType="dijit.form.TimeTextBox"
96                        constraints="{timePattern:'h:mm:ss a'}"
97                        required="true"
98                        invalidMessage="Invalid time." />
99        </div>
100
101        <div class="dojoTitlePaneLabel">
102                <label for="q4"> 24 Hour Time</label>
103                <span class="noticeMessage">TimeTextBox class,
104                        Attributes: {timePattern:'HH:mm:ss'}</span>
105        </div>
106        <div class="testExample">
107                <input id="q4" type="text" name="time2" value="T17:45:00"
108                        dojoType="dijit.form.TimeTextBox"
109                        constraints="{timePattern:'HH:mm:ss'}"
110                        required="true"
111                        invalidMessage="Invalid time. Use HH:mm:ss where HH is 00 - 23 hours.">
112        </div>
113
114        <div class="dojoTitlePaneLabel">
115                <label for="q5">24 Hour Time with 1 Hour TimePicker</label>
116                <span class="noticeMessage">TimeTextBox class,
117                        Attributes: {timePattern:'HH:mm:ss', clickableIncrement:'T00:15:00', visibleIncrement:'T00:15:00', visibleRange:'T01:00:00'}</span>
118        </div>
119        <div class="testExample">
120                <input id="q5" type="text" name="time2" value="T17:45:00"
121                        dojoType="dijit.form.TimeTextBox"
122                        constraints="{timePattern:'HH:mm:ss', clickableIncrement:'T00:15:00', visibleIncrement:'T00:15:00', visibleRange:'T01:00:00'}"
123                        required="true"
124                        invalidMessage="Invalid time. Use HH:mm:ss where HH is 00 - 23 hours.">
125        </div>
126
127        <div class="dojoTitlePaneLabel">
128                <label for="q6">Initially empty time text box</label>
129                <span class="noticeMessage">TimeTextBox class,
130                        Attributes: {formatLength:'medium'}</span>
131        </div>
132        <div class="testExample">
133                <input id="q6" type="text" name="time6"
134                        dojoType="dijit.form.TimeTextBox"
135                        constraints="{formatLength:'medium'}"
136                        required="true"
137                        onChange="dojo.byId('oc6').value=arguments[0]"
138                        invalidMessage="Invalid time." />
139                onChange:<input id="oc6" size="34" disabled value="not fired yet!" autocomplete="off">
140        </div>
141
142        <script>
143                function displayData() {
144                        var f = document.getElementById("form1");
145                        var s = "";
146                        for (var i = 0; i < f.elements.length; i++) {
147                                var elem = f.elements[i];
148                                if (elem.name == "button")  { continue; }
149                                s += elem.name + ": " + elem.value + "\n";
150                        }
151                        alert(s);
152                }
153        </script>
154
155                <div>
156                        <button name="button" onclick="displayData(); return false;">view data</button>
157                        <input type="submit" name="submit" />
158                </div>
159
160                </form>
161        </center>
162        </body>
163</html>