git.pond.sub.org Git - eow/blob - static/dojo-release-1.1.1/dijit/tests/i18n/time.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                 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   6                 <title>Test TextBox for Time</title>
   7
   8                 <script type="text/javascript" src="../../../dojo/dojo.js"
   9                         djConfig="isDebug: true, extraLocale: ['zh-cn','fr-fr','ja-jp','ar-eg','ru-ru','hi-in','en-us']"></script>
  10                 <script type="text/javascript" src="../../../dojo/currency.js"></script>
  11                 <script type="text/javascript" src="../../../dojo/number.js"></script>
  12                 <script type="text/javascript">
  13                         dojo.require("dijit.form.ValidationTextBox");
  14                         dojo.require("dojo.date.locale");
  15                         dojo.require("dojo.date.stamp");
  16                         dojo.require("dojo.date");
  17                         dojo.require("dojo.string");
  18                         dojo.require("dojo.parser");    // scan page for widgets and instantiate them
  19                         dojo.require("doh.runner");
  20                 </script>
  21                 <script src="test_i18n.js"></script>
  22                 <script type="text/javascript">
  23                         dojo.addOnLoad(function(){
  24                                 doh.register("t", getAllTestCases());
  25                                 doh.run();
  26                         });
  27                 </script>
  28
  29                 <style type="text/css">
  30                         @import "../../../dojo/resources/dojo.css";
  31                         @import "../../themes/tundra/tundra.css";
  32                         @import "../css/dijitTests.css";
  33
  34                         .title {
  35                                 background-color:#ddd;
  36                         }
  37
  38                         .hint {
  39                                 background-color:#eee;
  40                         }
  41
  42                         .testExample {
  43                                 background-color:#fbfbfb;
  44                                 padding:1em;
  45                                 margin-bottom:1em;
  46                                 border:1px solid #bfbfbf;
  47                         }
  48
  49                         .dojoTitlePaneLabel label {
  50                                 font-weight:bold;
  51                         }
  52
  53                         td {white-space:nowrap}
  54                 </style>
  55                 <script>
  56                         dojo.declare(
  57                                 "dijit.form.TimeTextBox",
  58                                 dijit.form.ValidationTextBox,
  59                                 {
  60                                         regExpGen: dojo.date.locale.regexp,
  61                                         format: dojo.date.locale.format,
  62                                         parse: dojo.date.locale.parse,
  63                                         value: new Date()
  64                                 }
  65                         );
  66
  67                         var tz_s = dojo.date.getTimezoneName(new Date());
  68                         if (!tz_s) {
  69                                 var offset = new Date().getTimezoneOffset();
  70                                 var tz = [
  71                                         (offset <= 0 ? "+" : "-"),
  72                                         dojo.string.pad(Math.floor(Math.abs(offset) / 60), 2),
  73                                         dojo.string.pad(Math.abs(offset) % 60, 2)
  74                                 ];
  75                                 tz.splice(0, 0, "GMT");
  76                                 tz.splice(3, 0, ":");
  77                                 tz_s = tz.join("");
  78                         }
  79
  80                         function gen4DateFormat(testCases, language, locale, date, short, shortCmt, medium, mediumCmt, long, longCmt, full, fullCmt) {
  81                                 var tz_l = language.indexOf("hi") == 0 && dojo.number.normalizeDigitChars ?
  82                                         dojo.number.normalizeDigitChars(tz_s, language) : tz_s;
  83
  84                                 short = short.replace(/UTC/, tz_l);
  85                                 medium = medium.replace(/UTC/, tz_l);
  86                                 long = long.replace(/UTC/g, tz_l);
  87                                 full = full.replace(/UTC/, tz_l);
  88
  89                                 var shortDate = null;
  90                                 testCases.push({
  91                                   attrs: {constraints: language.indexOf("hi") == 0 ? "{formatLength:'short', selector:'time', localeDigit:true}" : "{formatLength:'short', selector:'time'}",
  92                                                 lang: language},
  93                                   desc: "Locale: <b>" + locale + "</b> Format: <b>Short</b>",
  94                                   value: typeof(date) == "string" ? date : shortDate = new Date(date.getYear(), date.getMonth(), date.getDay() - 5, date.getHours(), date.getMinutes()),
  95                                   expValue: short,
  96                                   comment: shortCmt
  97                                 });
  98                                 testCases.push({
  99                                   attrs: {constraints: language.indexOf("hi") == 0 ? "{formatLength:'medium', selector:'time', localeDigit:true}" : "{formatLength:'medium', selector:'time'}",
 100                                                 lang: language},
 101                                   desc: "Locale: <b>" + locale + "</b> Format: <b>Medium</b>",
 102                                   value: date,
 103                                   expValue: medium,
 104                                   comment: mediumCmt
 105                                 });
 106                                 testCases.push({
 107                                   attrs: {constraints: language.indexOf("hi") == 0 ? "{formatLength:'long', selector:'time', localeDigit:true}" : "{formatLength:'long', selector:'time'}",
 108                                                 lang: language},
 109                                   desc: "Locale: <b>" + locale + "</b> Format: <b>Long</b>",
 110                                   value: date,
 111                                   expValue: long,
 112                                   comment: longCmt
 113                                 });
 114                                 testCases.push({
 115                                   attrs: {constraints: language.indexOf("hi") == 0 ? "{formatLength:'full', selector:'time', localeDigit:true}" : "{formatLength:'full', selector:'time'}",
 116                                                 lang: language},
 117                                   desc: "Locale: <b>" + locale + "</b> Format: <b>Full</b>",
 118                                   //value: typeof(date) == "string" || language.indexOf("fr") ? date : shortDate,
 119                                   value: date,
 120                                   expValue: full,
 121                                   comment: fullCmt
 122                                 });
 123
 124                                 date.processValue = function (value) {
 125                                         return value ? new Date(1970, 0, 1, value.getHours(), value.getMinutes(), value.getSeconds()) : value;
 126                                 };
 127                                 if (shortDate) {
 128                                         shortDate.processValue = date.processValue;
 129                                 }
 130                         }
 131                 </script>
 132         </head>
 133
 134         <body class="tundra">
 135                 <h1 class="testTitle">Dijit TextBox Globalization Test for Time</h1>
 136
 137                 <h2 class="testTitle">Press the following button to start all test after this page is loaded.</h2>
 138                 <button id="startButton" onclick="startTest()">Start Test</button>
 139                 <p>
 140                         Before start this test, make sure the <b>dojo/cldr/nls</b> contains the data for "zh-cn", "fr-fr", "ja-jp", "ru-ru", "hi-in", "en-us" and "ar-eg". If not, convert these CLDR data and put them there.
 141                 </p>
 142
 143                 <script>
 144                 (function() {
 145                         var testCases = [];
 146                         gen4DateFormat(testCases, "ru-ru", "ru_RU", "1970-01-01T15:25:35",
 147                                 "15:25", "", "15:25:35", "", "15:25:35 UTC", "<a href='#cmt_1'>See #1.</a>", "15:25:35 UTC", "<a href='#cmt_1'>See #1.</a>");
 148                         gen4DateFormat(testCases, "zh-cn", "zh_CN", "1970-01-01T15:25:35",
 149                                 "下午3:25", "", "下午03:25:35", "", "下午03时25分35秒", "", "下午03时25分35秒 UTC", "<a href='#cmt_1'>See #1.</a>");
 150                         gen4DateFormat(testCases, "en-us", "en_US", "1970-01-01T15:25:35",
 151                                 "3:25 PM", "", "3:25:35 PM", "", "3:25:35 PM UTC", "<a href='#cmt_1'>See #1.</a>", "3:25:35 PM UTC", "<a href='#cmt_1'>See #1.</a>");
 152                         gen4DateFormat(testCases, "fr-fr", "fr_FR", "1970-01-01T15:25:35",
 153                                 "15:25", "", "15:25:35", "", "15:25:35 UTC", "<a href='#cmt_1'>See #1.</a>", "15:25:35 UTC", "<a href='#cmt_1'>See #1.</a>");
 154                         gen4DateFormat(testCases, "ja-jp", "ja_JP", "1970-01-01T15:25:35",
 155                                 "15:25", "", "15:25:35", "", "15:25:35:UTC", "<a href='#cmt_1'>See #1.</a>", "15時25分35秒UTC", "<a href='#cmt_1'>See #1.</a>");
 156                         gen4DateFormat(testCases, "ar-eg", "ar_EG", "1970-01-01T15:25:35",
 157                                 "3:25 \u0645", "", "3:25:35 \u0645", "", "UTC 3:25:35 \u0645", "", "UTC 3:25:35 \u0645", "<a href='#cmt_1'>See #1.</a>");
 158                         gen4DateFormat(testCases, "hi-in", "hi_IN", "1970-01-01T15:25:35",
 159                                 "१५:२५", "<a href='#cmt_2'>See #2.</a>", "१५:२५:३५", "<a href='#cmt_2'>See #2.</a>", "१५:२५:३५ UTC", "<a href='#cmt_1'>See #1.</a> <a href='#cmt_2'>See #2.</a>", "१५:२५:३५ UTC", "<a href='#cmt_1'>See #1.</a> <a href='#cmt_2'>See #2.</a>");
 160                         genFormatTestCases("Time Format", "dijit.form.TimeTextBox", testCases);
 161
 162                         testCases = [];
 163                         gen4DateFormat(testCases, "ru-ru", "ru_RU", new Date(1970, 0, 1, 15, 25, 35),
 164                                 "15:25", "", "15:25:35", "", "15:25:35 UTC", "<a href='#cmt_1'>See #1.</a>", "15:25:35 UTC", "<a href='#cmt_1'>See #1.</a>");
 165                         gen4DateFormat(testCases, "zh-cn", "zh_CN", new Date(1970, 0, 1, 15, 25, 35),
 166                                 "下午3:25", "<a href='#cmt_3'>See #3.</a>", "下午03:25:35", "<a href='#cmt_3'>See #3.</a>", "下午03时25分35秒", "<a href='#cmt_3'>See #3.</a>", "下午03时25分35秒 UTC", "<a href='#cmt_1'>See #1.</a>");
 167                         gen4DateFormat(testCases, "en-us", "en_US", new Date(1970, 0, 1, 15, 25, 35),
 168                                 "3:25 PM", "", "3:25:35 PM", "", "3:25:35 PM UTC", "<a href='#cmt_1'>See #1.</a>", "3:25:35 PM UTC", "<a href='#cmt_1'>See #1.</a>");
 169                         gen4DateFormat(testCases, "fr-fr", "fr_FR", new Date(1970, 0, 1, 15, 25, 35),
 170                                 "15:25", "", "15:25:35", "", "15:25:35 UTC", "<a href='#cmt_1'>See #1.</a>", "15:25:35 UTC", "<a href='#cmt_1'>See #1.</a>");
 171                         gen4DateFormat(testCases, "ja-jp", "ja_JP", new Date(1970, 0, 1, 15, 25, 35),
 172                                 "15:25", "", "15:25:35", "", "15:25:35:UTC", "<a href='#cmt_1'>See #1.</a>", "15時25分35秒UTC", "<a href='#cmt_1'>See #1.</a>");
 173                         gen4DateFormat(testCases, "ar-eg", "ar_EG", new Date(1970, 0, 1, 15, 25, 35),
 174                                 "3:25 \u0645", "", "3:25:35 \u0645", "", "UTC 3:25:35 \u0645", "", "UTC 3:25:35 \u0645", "<a href='#cmt_1'>See #1.</a>");
 175                         gen4DateFormat(testCases, "hi-in", "hi_IN", new Date(1970, 0, 1, 15, 25, 35),
 176                                 "१५:२५", "<a href='#cmt_2'>See #2.</a>", "१५:२५:३५", "<a href='#cmt_2'>See #2.</a>", "१५:२५:३५ UTC", "<a href='#cmt_1'>See #1.</a> <a href='#cmt_2'>See #2.</a>", "१५:२५:३५ UTC", "<a href='#cmt_1'>See #1.</a> <a href='#cmt_2'>See #2.</a>");
 177                         genValidateTestCases("Time Validate", "dijit.form.TimeTextBox", testCases);
 178
 179                         dojo.parser.parse();
 180                 })();
 181                 </script>
 182
 183                 <h2 class="testTitle">Issues &amp; Comments</h2>
 184                 <h3 class="testTitle"><a name="cmt_1">Issue #1 <sup style="color:blue">Fixed</sup></a></h3>
 185                 <p>
 186                         Currently Dojo do not support parsing for most "long" and "full" time format which have a timezone mark in it.
 187                 </p>
 188
 189                 <h3 class="testTitle"><a name="cmt_2">Issue #2 <sup style="color:blue">Fixed: added a "localeDigit" to the options</sup></a></h3>
 190                 <p>
 191                         Strictly speaking, the data conversion must support non-European number characters in some locales like Arabic and Hindi.
 192                         For example, ICU formats a number data into Indic number characters by default in the Arabic locale.
 193                         However, currently Dojo does not support this feature (Dojo uses the default number conversion of the browser).
 194                 </p>
 195
 196                 <h3 class="testTitle"><a name="cmt_3">Issue #3 <sup style="color:blue">Fixed</sup></a></h3>
 197                 <p>
 198                         This defect only occurs on the "zh-cn" locale. Dojo accepts "下午"(pm) in the textbox, but it automatically changes it to
 199                         "上午"(am) after the focus changed. The date value of the textbox is also changed.
 200                 </p>
 201                 <p>
 202                         The root cause of this issue is that the parser method's code assumes am/pm symbol always appears after the hour value.
 203                         But this is not true, for example, the pattern for "zh-cn" puts am/pm field before all the other fields.
 204                 </p>
 205         </body>
 206 </html>
 207