Blame | Last modification | View Log | RSS feed
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"><html><head><title>Test DateTextBox Widget</title><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("dojo.date.locale");dojo.require("dojo.parser"); // scan page for widgets and instantiate them</script><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;}.small {width: 3em;}.medium {width: 10em;}.long {width: 20em;}.verylong {width: 700px;}.noticeMessage {color:#093669;font-size:0.95em;margin-left:0.5em;}.dojoTitlePaneLabel label {font-weight:bold;}</style></head><body><h1 class="testTitle">Test DateTextBox Widget</h1><!-- to test form submission, you'll need to create an action handler similar tohttp://www.utexas.edu/teamweb/cgi-bin/generic.cgi --><form id="form1" action="" name="example" method="post"><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"></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"promptMessage="mm/dd/yyyy"onChange="dojo.byId('oc2').value=arguments[0]"invalidMessage="Invalid date. Use mm/dd/yyyy format." />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;"></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><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 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><button name="button" onclick="displayData(); return false;">view data</button><input type="submit" name="submit" /></div></form></body></html>