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
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test DateTextBox Widget</title>
<style type="text/css">
@import "../../../dojo/resources/dojo.css";
@import "../css/dijitTests.css";
.testExample {
background-color:#fbfbfb;
padding:1em;
margin-bottom:1em;
border:1px solid #bfbfbf;
}
body .medium {
width: 10em;
}
.noticeMessage {
color:#093669;
font-size:0.95em;
margin-left:0.5em;
}
.dojoTitlePaneLabel label {
font-weight:bold;
}
</style>
<script type="text/javascript" src="../../../dojo/dojo.js"
djConfig="isDebug: true, parseOnLoad: true, extraLocale: ['de-de', 'en-us']"></script>
<script type="text/javascript" src="../_testCommon.js"></script>
<script type="text/javascript">
dojo.require("dijit.form.DateTextBox");
dojo.require("dijit.form.Form");
dojo.require("dojo.date.locale");
dojo.require("dojo.parser"); // scan page for widgets and instantiate them
</script>
</head>
<body>
<h1 class="testTitle">Test DateTextBox Widget</h1>
<!-- to test form submission, you'll need to create an action handler similar to
http://www.utexas.edu/teamweb/cgi-bin/generic.cgi -->
<form id="form1" dojoType='dijit.form.Form' action="" name="example" method="">
<div class="dojoTitlePaneLabel">
<label for="q1"> Date (local format) </label>
<span class="noticeMessage">DateTextBox class, no attributes</span>
</div>
<div class="testExample">
<input id="q1" name="noDOMvalue" type="text" dojoType="dijit.form.DateTextBox"
onChange="dojo.byId('oc1').value=arguments[0]"
>
onChange:<input id="oc1" size="34" disabled value="not fired yet!" autocomplete="off">
</div>
<div class="dojoTitlePaneLabel">
<label for="q2"> Date (local format - long) </label>
<span class="noticeMessage">DateTextBox class,
Attributes: required="true", trim="true", constraints={min:'2004-01-01',max:'2006-12-31',formatLength:'long'}. Works for leap years</span>
</div>
<div class="testExample">
<input id="q2" type="text" name="date1" class="medium" value="2005-12-30"
dojoType="dijit.form.DateTextBox"
constraints="{min:'2004-01-01',max:'2006-12-31',formatLength:'long'}"
required="true"
trim="true"
onChange="dojo.byId('oc2').value=arguments[0]"
invalidMessage="Invalid date." />
onChange:<input id="oc2" size="34" disabled value="not fired yet!" autocomplete="off">
<input type="button" value="Destroy" onClick="dijit.byId('q2').destroy(); return false;">
<input type="button" value="set max to 2007-12-31" onClick="dijit.byId('q2').constraints.max = new Date(2007,11,31); return false;">
</div>
<div class="dojoTitlePaneLabel">
<label for="q3"> Date (American format) </label>
<span class="noticeMessage">DateTextBox class,
Attributes: lang="en-us", required="true", constraints={min:'2004-01-01',max:'2006-12-31'}. Works for leap years</span>
</div>
<div class="testExample">
<input id="q3" type="text" name="date2" class="medium" value="2005-12-30"
dojoType="dijit.form.DateTextBox"
constraints="{min:'2004-01-01',max:'2006-12-31'}"
lang="en-us"
required="true"
promptMessage="mm/dd/yyyy"
invalidMessage="Invalid date. Use mm/dd/yyyy format." />
</div>
<div class="dojoTitlePaneLabel">
<label for="q4"> Date (German format) </label>
<span class="noticeMessage">DateTextBox class,
Attributes: lang="de-de", constraints={min:2004-01-01, max:2006-12-31}. Works for leap years</span>
</div>
<div class="testExample">
<input id="q4" class="medium"/>
</div>
<div class="dojoTitlePaneLabel">
<label for="q5"> Date, overriding pattern</label>
<span class="noticeMessage">Date, overriding pattern with dd-MM-yyyy</span>
</div>
<div class="testExample">
<input id="q5" name="noDOMvalue" type="text" dojoType="dijit.form.DateTextBox" constraints="{datePattern:'dd-MM-yyyy', strict:true}">
</div>
<script>
// See if we can make a widget in script and attach it to the DOM ourselves.
dojo.addOnLoad(function(){
var props = {
name: "date4",
value: new Date(2006,10,29),
constraints: {min:new Date(2004,0,1),max:new Date(2006,11,31)},
lang: "de-de",
promptMessage: "dd.mm.yy",
rangeMessage: "Enter a date in the year range 2004-2006.",
invalidMessage: "Invalid date. Use dd.mm.yy format."
};
var w = new dijit.form.DateTextBox(props, "q4");
});
</script>
<script>
function displayData() {
var f = document.getElementById("form1");
var s = "";
for (var i = 0; i < f.elements.length; i++) {
var elem = f.elements[i];
if (elem.name == "button") { continue; }
s += elem.name + ": " + elem.value + "\n";
}
alert(s);
}
</script>
<div class="dojoTitlePaneLabel">
<label for="fromDate"> Date pairs, to/from</label>
</div>
<div class="testExample">
From: <input id="fromDate" type="text" name="fromDate" dojoType="dijit.form.DateTextBox"
required="true"
onChange="dijit.byId('toDate').constraints.min = this.getValue();" />
To: <input id="toDate" type="text" name="toDate" dojoType="dijit.form.DateTextBox"
required="true"
onChange="dijit.byId('fromDate').constraints.max = this.getValue();" />
</div>
<div>
<button name="button" onclick="displayData(); return false;">view data</button>
<input type="submit" name="submit" />
<input type="reset" name="reset" />
</div>
</form>
</body>
</html>
|
