git.pond.sub.org Git - eow/blob - static/dojo-release-1.1.1/dijit/tests/form/test_DateTextBox.html

   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 DateTextBox 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                         body .medium {
  19                                 width: 10em;
  20                         }
  21
  22                         .noticeMessage {
  23                                 color:#093669;
  24                                 font-size:0.95em;
  25                                 margin-left:0.5em;
  26                         }
  27
  28                         .dojoTitlePaneLabel label {
  29                                 font-weight:bold;
  30                         }
  31                 </style>
  32
  33                 <script type="text/javascript" src="../../../dojo/dojo.js"
  34                         djConfig="isDebug: true, parseOnLoad: true, extraLocale: ['de-de', 'en-us']"></script>
  35                 <script type="text/javascript" src="../_testCommon.js"></script>
  36
  37                 <script type="text/javascript">
  38                         dojo.require("dijit.form.DateTextBox");
  39                         dojo.require("dijit.form.Form");
  40                         dojo.require("dojo.date.locale");
  41                         dojo.require("dojo.parser");    // scan page for widgets and instantiate them
  42                 </script>
  43         </head>
  44
  45         <body>
  46                 <h1 class="testTitle">Test DateTextBox Widget</h1>
  47                 <!--    to test form submission, you'll need to create an action handler similar to
  48                         http://www.utexas.edu/teamweb/cgi-bin/generic.cgi -->
  49                 <form id="form1" dojoType='dijit.form.Form' action="" name="example" method="">
  50                         <div class="dojoTitlePaneLabel">
  51                                 <label for="q1"> Date (local format) </label>
  52                                 <span class="noticeMessage">DateTextBox class, no attributes</span>
  53                         </div>
  54                         <div class="testExample">
  55                                 <input id="q1" name="noDOMvalue" type="text" dojoType="dijit.form.DateTextBox"
  56                                          onChange="dojo.byId('oc1').value=arguments[0]"
  57                                 >
  58                                 onChange:<input id="oc1" size="34" disabled value="not fired yet!" autocomplete="off">
  59                         </div>
  60                         <div class="dojoTitlePaneLabel">
  61                                 <label for="q2"> Date (local format - long) </label>
  62                                 <span class="noticeMessage">DateTextBox class,
  63                                         Attributes: required="true", trim="true", constraints={min:'2004-01-01',max:'2006-12-31',formatLength:'long'}. Works for leap years</span>
  64                         </div>
  65                         <div class="testExample">
  66                                 <input id="q2" type="text" name="date1" class="medium" value="2005-12-30"
  67                                         dojoType="dijit.form.DateTextBox"
  68                                         constraints="{min:'2004-01-01',max:'2006-12-31',formatLength:'long'}"
  69                                         required="true"
  70                                         trim="true"
  71                                         onChange="dojo.byId('oc2').value=arguments[0]"
  72                                         invalidMessage="Invalid date." />
  73                                 onChange:<input id="oc2" size="34" disabled value="not fired yet!" autocomplete="off">
  74                                 <input type="button" value="Destroy" onClick="dijit.byId('q2').destroy(); return false;">
  75                                 <input type="button" value="set max to 2007-12-31" onClick="dijit.byId('q2').constraints.max = new Date(2007,11,31); return false;">
  76                         </div>
  77                         <div class="dojoTitlePaneLabel">
  78                                 <label for="q3"> Date (American format) </label>
  79                                 <span class="noticeMessage">DateTextBox class,
  80                                         Attributes: lang="en-us", required="true", constraints={min:'2004-01-01',max:'2006-12-31'}. Works for leap years</span>
  81                         </div>
  82                         <div class="testExample">
  83                                 <input id="q3" type="text" name="date2" class="medium" value="2005-12-30"
  84                                         dojoType="dijit.form.DateTextBox"
  85                                         constraints="{min:'2004-01-01',max:'2006-12-31'}"
  86                                         lang="en-us"
  87                                         required="true"
  88                                         promptMessage="mm/dd/yyyy"
  89                                         invalidMessage="Invalid date. Use mm/dd/yyyy format." />
  90                         </div>
  91                         <div class="dojoTitlePaneLabel">
  92                                 <label for="q4"> Date (German format) </label>
  93                                 <span class="noticeMessage">DateTextBox class,
  94                                         Attributes: lang="de-de", constraints={min:2004-01-01, max:2006-12-31}. Works for leap years</span>
  95                         </div>
  96                         <div class="testExample">
  97                                 <input id="q4" class="medium"/>
  98                         </div>
  99
 100                         <div class="dojoTitlePaneLabel">
 101                                 <label for="q5"> Date, overriding pattern</label>
 102                                 <span class="noticeMessage">Date, overriding pattern with dd-MM-yyyy</span>
 103                         </div>
 104                         <div class="testExample">
 105                                 <input id="q5" name="noDOMvalue" type="text" dojoType="dijit.form.DateTextBox" constraints="{datePattern:'dd-MM-yyyy', strict:true}">
 106                         </div>
 107
 108                         <script>
 109                         // See if we can make a widget in script and attach it to the DOM ourselves.
 110                         dojo.addOnLoad(function(){
 111                                 var props = {
 112                                         name: "date4",
 113                                         value: new Date(2006,10,29),
 114                                         constraints: {min:new Date(2004,0,1),max:new Date(2006,11,31)},
 115                                         lang: "de-de",
 116                                         promptMessage: "dd.mm.yy",
 117                                         rangeMessage: "Enter a date in the year range 2004-2006.",
 118                                         invalidMessage: "Invalid date. Use dd.mm.yy format."
 119                                 };
 120                                 var w = new dijit.form.DateTextBox(props, "q4");
 121                         });
 122                         </script>
 123
 124                         <script>
 125                                 function displayData() {
 126                                         var f = document.getElementById("form1");
 127                                         var s = "";
 128                                         for (var i = 0; i < f.elements.length; i++) {
 129                                                 var elem = f.elements[i];
 130                                                 if (elem.name == "button")  { continue; }
 131                                                 s += elem.name + ": " + elem.value + "\n";
 132                                         }
 133                                         alert(s);
 134                                 }
 135                         </script>
 136
 137                         <div class="dojoTitlePaneLabel">
 138                                 <label for="fromDate"> Date pairs, to/from</label>
 139                         </div>
 140                         <div class="testExample">
 141                                 From: <input id="fromDate" type="text" name="fromDate" dojoType="dijit.form.DateTextBox"
 142                                         required="true"
 143                                         onChange="dijit.byId('toDate').constraints.min = this.getValue();" />
 144                                 To: <input id="toDate" type="text" name="toDate" dojoType="dijit.form.DateTextBox"
 145                                         required="true"
 146                                         onChange="dijit.byId('fromDate').constraints.max = this.getValue();" />
 147                         </div>
 148
 149                         <div>
 150                                 <button name="button" onclick="displayData(); return false;">view data</button>
 151                                 <input type="submit" name="submit" />
 152                                 <input type="reset" name="reset" />
 153                         </div>
 154                 </form>
 155         </body>
 156 </html>