diff options
Diffstat (limited to 'includes/js/dijit/tests/form/test_DateTextBox.html')
| -rw-r--r-- | includes/js/dijit/tests/form/test_DateTextBox.html | 156 |
1 files changed, 156 insertions, 0 deletions
diff --git a/includes/js/dijit/tests/form/test_DateTextBox.html b/includes/js/dijit/tests/form/test_DateTextBox.html new file mode 100644 index 0000000..d36ac73 --- /dev/null +++ b/includes/js/dijit/tests/form/test_DateTextBox.html @@ -0,0 +1,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> |