git.pond.sub.org Git - eow/blob - static/dojo-release-1.1.1/dijit/tests/form/test_TimeTextBox.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 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                         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.TextBox");
  39                         dojo.require("dijit.form.ValidationTextBox");
  40                         dojo.require("dijit.form.NumberTextBox");
  41                         dojo.require("dijit.form.CurrencyTextBox");
  42                         dojo.require("dijit.form.DateTextBox");
  43                         dojo.require("dijit.form.TimeTextBox");
  44                         dojo.require("dojo.currency");
  45                         dojo.require("dojo.date.locale");
  46                         dojo.require("dojo.parser");    // scan page for widgets and instantiate them
  47                 </script>
  48         </head>
  49
  50         <body>
  51                 <h1 class="testTitle">Test TimeTextBox Widget</h1>
  52                 <!--    to test form submission, you'll need to create an action handler similar to
  53                         http://www.utexas.edu/teamweb/cgi-bin/generic.cgi -->
  54                 <form id="form1" action="" name="example" method="">
  55
  56         <div class="dojoTitlePaneLabel">
  57                 <label for="q1">Time using local conventions with seconds</label>
  58                 <span class="noticeMessage">TimeTextBox class,
  59                         Attributes: {formatLength:'medium'}</span>
  60         </div>
  61         <div class="testExample">
  62                 <input id="q1" type="text" name="time1" class="medium" value="T17:45:00"
  63                         dojoType="dijit.form.TimeTextBox"
  64                         constraints="{formatLength:'medium'}"
  65                         required="true"
  66                         onChange="dojo.byId('oc1').value=arguments[0]"
  67                         invalidMessage="Invalid time." />
  68                 onChange:<input id="oc1" size="34" disabled value="not fired yet!" autocomplete="off">
  69         </div>
  70
  71         <div class="dojoTitlePaneLabel">
  72                 <label for="q2">Time using local conventions without seconds, required, no invalid message tooltip</label>
  73                 <span class="noticeMessage">TimeTextBox class,
  74                         Attributes: {formatLength:'short'}</span>
  75         </div>
  76         <div class="testExample">
  77                 <input id="q2" type="text" name="time1a" class="medium" value="T17:45:00"
  78                         dojoType="dijit.form.TimeTextBox"
  79                         constraints="{formatLength:'short'}"
  80                         required="true"
  81                         invalidMessage="" />
  82         </div>
  83
  84         <div class="dojoTitlePaneLabel">
  85                 <label for="q3"> 12 Hour Time </label>
  86                 <span class="noticeMessage">TimeTextBox class,
  87                         Attributes: {timePattern:'h:mm:ss a'}</span>
  88         </div>
  89         <div class="testExample">
  90                 <input id="q3" type="text" name="time1b" class="medium" value="T17:45:00"
  91                         dojoType="dijit.form.TimeTextBox"
  92                         constraints="{timePattern:'h:mm:ss a'}"
  93                         required="true"
  94                         invalidMessage="Invalid time." />
  95         </div>
  96
  97         <div class="dojoTitlePaneLabel">
  98                 <label for="q4"> 24 Hour Time</label>
  99                 <span class="noticeMessage">TimeTextBox class,
 100                         Attributes: {timePattern:'HH:mm:ss'}</span>
 101         </div>
 102         <div class="testExample">
 103                 <input id="q4" type="text" name="time2" class="medium" value="T17:45:00"
 104                         dojoType="dijit.form.TimeTextBox"
 105                         constraints="{timePattern:'HH:mm:ss'}"
 106                         required="true"
 107                         invalidMessage="Invalid time. Use HH:mm:ss where HH is 00 - 23 hours.">
 108         </div>
 109
 110         <div class="dojoTitlePaneLabel">
 111                 <label for="q5">24 Hour Time with 1 Hour TimePicker</label>
 112                 <span class="noticeMessage">TimeTextBox class,
 113                         Attributes: {timePattern:'HH:mm:ss', clickableIncrement:'T00:15:00', visibleIncrement:'T00:15:00', visibleRange:'T01:00:00'}</span>
 114         </div>
 115         <div class="testExample">
 116                 <input id="q5" type="text" name="time2" class="medium" value="T17:45:00"
 117                         dojoType="dijit.form.TimeTextBox"
 118                         constraints="{timePattern:'HH:mm:ss', clickableIncrement:'T00:15:00', visibleIncrement:'T00:15:00', visibleRange:'T01:00:00'}"
 119                         required="true"
 120                         invalidMessage="Invalid time. Use HH:mm:ss where HH is 00 - 23 hours.">
 121         </div>
 122
 123         <script>
 124                 function displayData() {
 125                         var f = document.getElementById("form1");
 126                         var s = "";
 127                         for (var i = 0; i < f.elements.length; i++) {
 128                                 var elem = f.elements[i];
 129                                 if (elem.name == "button")  { continue; }
 130                                 s += elem.name + ": " + elem.value + "\n";
 131                         }
 132                         alert(s);
 133                 }
 134         </script>
 135
 136                 <div>
 137                         <button name="button" onclick="displayData(); return false;">view data</button>
 138                         <input type="submit" name="submit" />
 139                 </div>
 140
 141                 </form>
 142         </body>
 143 </html>