208 lines
9.6 KiB
HTML
208 lines
9.6 KiB
HTML
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
|
||
|
|
"http://www.w3.org/TR/html4/strict.dtd">
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||
|
|
<title>Test TextBox for Time</title>
|
||
|
|
|
||
|
|
<script type="text/javascript" src="../../../dojo/dojo.js"
|
||
|
|
djConfig="isDebug: true, extraLocale: ['zh-cn','fr-fr','ja-jp','ar-eg','ru-ru','hi-in','en-us']"></script>
|
||
|
|
<script type="text/javascript" src="../../../dojo/currency.js"></script>
|
||
|
|
<script type="text/javascript" src="../../../dojo/number.js"></script>
|
||
|
|
<script type="text/javascript">
|
||
|
|
dojo.require("dijit.form.ValidationTextBox");
|
||
|
|
dojo.require("dojo.date.locale");
|
||
|
|
dojo.require("dojo.date.stamp");
|
||
|
|
dojo.require("dojo.date");
|
||
|
|
dojo.require("dojo.string");
|
||
|
|
dojo.require("dojo.parser"); // scan page for widgets and instantiate them
|
||
|
|
dojo.require("doh.runner");
|
||
|
|
</script>
|
||
|
|
<script src="test_i18n.js"></script>
|
||
|
|
<script type="text/javascript">
|
||
|
|
dojo.addOnLoad(function(){
|
||
|
|
doh.register("t", getAllTestCases());
|
||
|
|
doh.run();
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style type="text/css">
|
||
|
|
@import "../../../dojo/resources/dojo.css";
|
||
|
|
@import "../../themes/tundra/tundra.css";
|
||
|
|
@import "../css/dijitTests.css";
|
||
|
|
|
||
|
|
.title {
|
||
|
|
background-color:#ddd;
|
||
|
|
}
|
||
|
|
|
||
|
|
.hint {
|
||
|
|
background-color:#eee;
|
||
|
|
}
|
||
|
|
|
||
|
|
.testExample {
|
||
|
|
background-color:#fbfbfb;
|
||
|
|
padding:1em;
|
||
|
|
margin-bottom:1em;
|
||
|
|
border:1px solid #bfbfbf;
|
||
|
|
}
|
||
|
|
|
||
|
|
.dojoTitlePaneLabel label {
|
||
|
|
font-weight:bold;
|
||
|
|
}
|
||
|
|
|
||
|
|
td {white-space:nowrap}
|
||
|
|
</style>
|
||
|
|
<script>
|
||
|
|
dojo.declare(
|
||
|
|
"dijit.form.TimeTextBox",
|
||
|
|
dijit.form.ValidationTextBox,
|
||
|
|
{
|
||
|
|
regExpGen: dojo.date.locale.regexp,
|
||
|
|
format: dojo.date.locale.format,
|
||
|
|
parse: dojo.date.locale.parse,
|
||
|
|
value: new Date()
|
||
|
|
}
|
||
|
|
);
|
||
|
|
|
||
|
|
var tz_s = dojo.date.getTimezoneName(new Date());
|
||
|
|
if (!tz_s) {
|
||
|
|
var offset = new Date().getTimezoneOffset();
|
||
|
|
var tz = [
|
||
|
|
(offset <= 0 ? "+" : "-"),
|
||
|
|
dojo.string.pad(Math.floor(Math.abs(offset) / 60), 2),
|
||
|
|
dojo.string.pad(Math.abs(offset) % 60, 2)
|
||
|
|
];
|
||
|
|
tz.splice(0, 0, "GMT");
|
||
|
|
tz.splice(3, 0, ":");
|
||
|
|
tz_s = tz.join("");
|
||
|
|
}
|
||
|
|
|
||
|
|
function gen4DateFormat(testCases, language, locale, date, short, shortCmt, medium, mediumCmt, long, longCmt, full, fullCmt) {
|
||
|
|
var tz_l = language.indexOf("hi") == 0 && dojo.number.normalizeDigitChars ?
|
||
|
|
dojo.number.normalizeDigitChars(tz_s, language) : tz_s;
|
||
|
|
|
||
|
|
short = short.replace(/UTC/, tz_l);
|
||
|
|
medium = medium.replace(/UTC/, tz_l);
|
||
|
|
long = long.replace(/UTC/g, tz_l);
|
||
|
|
full = full.replace(/UTC/, tz_l);
|
||
|
|
|
||
|
|
var shortDate = null;
|
||
|
|
testCases.push({
|
||
|
|
attrs: {constraints: language.indexOf("hi") == 0 ? "{formatLength:'short', selector:'time', localeDigit:true}" : "{formatLength:'short', selector:'time'}",
|
||
|
|
lang: language},
|
||
|
|
desc: "Locale: <b>" + locale + "</b> Format: <b>Short</b>",
|
||
|
|
value: typeof(date) == "string" ? date : shortDate = new Date(date.getYear(), date.getMonth(), date.getDay() - 5, date.getHours(), date.getMinutes()),
|
||
|
|
expValue: short,
|
||
|
|
comment: shortCmt
|
||
|
|
});
|
||
|
|
testCases.push({
|
||
|
|
attrs: {constraints: language.indexOf("hi") == 0 ? "{formatLength:'medium', selector:'time', localeDigit:true}" : "{formatLength:'medium', selector:'time'}",
|
||
|
|
lang: language},
|
||
|
|
desc: "Locale: <b>" + locale + "</b> Format: <b>Medium</b>",
|
||
|
|
value: date,
|
||
|
|
expValue: medium,
|
||
|
|
comment: mediumCmt
|
||
|
|
});
|
||
|
|
testCases.push({
|
||
|
|
attrs: {constraints: language.indexOf("hi") == 0 ? "{formatLength:'long', selector:'time', localeDigit:true}" : "{formatLength:'long', selector:'time'}",
|
||
|
|
lang: language},
|
||
|
|
desc: "Locale: <b>" + locale + "</b> Format: <b>Long</b>",
|
||
|
|
value: date,
|
||
|
|
expValue: long,
|
||
|
|
comment: longCmt
|
||
|
|
});
|
||
|
|
testCases.push({
|
||
|
|
attrs: {constraints: language.indexOf("hi") == 0 ? "{formatLength:'full', selector:'time', localeDigit:true}" : "{formatLength:'full', selector:'time'}",
|
||
|
|
lang: language},
|
||
|
|
desc: "Locale: <b>" + locale + "</b> Format: <b>Full</b>",
|
||
|
|
//value: typeof(date) == "string" || language.indexOf("fr") ? date : shortDate,
|
||
|
|
value: date,
|
||
|
|
expValue: full,
|
||
|
|
comment: fullCmt
|
||
|
|
});
|
||
|
|
|
||
|
|
date.processValue = function (value) {
|
||
|
|
return value ? new Date(1970, 0, 1, value.getHours(), value.getMinutes(), value.getSeconds()) : value;
|
||
|
|
};
|
||
|
|
if (shortDate) {
|
||
|
|
shortDate.processValue = date.processValue;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body class="tundra">
|
||
|
|
<h1 class="testTitle">Dijit TextBox Globalization Test for Time</h1>
|
||
|
|
|
||
|
|
<h2 class="testTitle">Press the following button to start all test after this page is loaded.</h2>
|
||
|
|
<button id="startButton" onclick="startTest()">Start Test</button>
|
||
|
|
<p>
|
||
|
|
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.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
(function() {
|
||
|
|
var testCases = [];
|
||
|
|
gen4DateFormat(testCases, "ru-ru", "ru_RU", "1970-01-01T15:25:35",
|
||
|
|
"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>");
|
||
|
|
gen4DateFormat(testCases, "zh-cn", "zh_CN", "1970-01-01T15:25:35",
|
||
|
|
"下午3:25", "", "下午03:25:35", "", "下午03时25分35秒", "", "下午03时25分35秒 UTC", "<a href='#cmt_1'>See #1.</a>");
|
||
|
|
gen4DateFormat(testCases, "en-us", "en_US", "1970-01-01T15:25:35",
|
||
|
|
"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>");
|
||
|
|
gen4DateFormat(testCases, "fr-fr", "fr_FR", "1970-01-01T15:25:35",
|
||
|
|
"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>");
|
||
|
|
gen4DateFormat(testCases, "ja-jp", "ja_JP", "1970-01-01T15:25:35",
|
||
|
|
"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>");
|
||
|
|
gen4DateFormat(testCases, "ar-eg", "ar_EG", "1970-01-01T15:25:35",
|
||
|
|
"3:25 \u0645", "", "3:25:35 \u0645", "", "UTC 3:25:35 \u0645", "", "UTC 3:25:35 \u0645", "<a href='#cmt_1'>See #1.</a>");
|
||
|
|
gen4DateFormat(testCases, "hi-in", "hi_IN", "1970-01-01T15:25:35",
|
||
|
|
"१५:२५", "<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>");
|
||
|
|
genFormatTestCases("Time Format", "dijit.form.TimeTextBox", testCases);
|
||
|
|
|
||
|
|
testCases = [];
|
||
|
|
gen4DateFormat(testCases, "ru-ru", "ru_RU", new Date(1970, 0, 1, 15, 25, 35),
|
||
|
|
"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>");
|
||
|
|
gen4DateFormat(testCases, "zh-cn", "zh_CN", new Date(1970, 0, 1, 15, 25, 35),
|
||
|
|
"下午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>");
|
||
|
|
gen4DateFormat(testCases, "en-us", "en_US", new Date(1970, 0, 1, 15, 25, 35),
|
||
|
|
"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>");
|
||
|
|
gen4DateFormat(testCases, "fr-fr", "fr_FR", new Date(1970, 0, 1, 15, 25, 35),
|
||
|
|
"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>");
|
||
|
|
gen4DateFormat(testCases, "ja-jp", "ja_JP", new Date(1970, 0, 1, 15, 25, 35),
|
||
|
|
"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>");
|
||
|
|
gen4DateFormat(testCases, "ar-eg", "ar_EG", new Date(1970, 0, 1, 15, 25, 35),
|
||
|
|
"3:25 \u0645", "", "3:25:35 \u0645", "", "UTC 3:25:35 \u0645", "", "UTC 3:25:35 \u0645", "<a href='#cmt_1'>See #1.</a>");
|
||
|
|
gen4DateFormat(testCases, "hi-in", "hi_IN", new Date(1970, 0, 1, 15, 25, 35),
|
||
|
|
"१५:२५", "<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>");
|
||
|
|
genValidateTestCases("Time Validate", "dijit.form.TimeTextBox", testCases);
|
||
|
|
|
||
|
|
dojo.parser.parse();
|
||
|
|
})();
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<h2 class="testTitle">Issues & Comments</h2>
|
||
|
|
<h3 class="testTitle"><a name="cmt_1">Issue #1 <sup style="color:blue">Fixed</sup></a></h3>
|
||
|
|
<p>
|
||
|
|
Currently Dojo do not support parsing for most "long" and "full" time format which have a timezone mark in it.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h3 class="testTitle"><a name="cmt_2">Issue #2 <sup style="color:blue">Fixed: added a "localeDigit" to the options</sup></a></h3>
|
||
|
|
<p>
|
||
|
|
Strictly speaking, the data conversion must support non-European number characters in some locales like Arabic and Hindi.
|
||
|
|
For example, ICU formats a number data into Indic number characters by default in the Arabic locale.
|
||
|
|
However, currently Dojo does not support this feature (Dojo uses the default number conversion of the browser).
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<h3 class="testTitle"><a name="cmt_3">Issue #3 <sup style="color:blue">Fixed</sup></a></h3>
|
||
|
|
<p>
|
||
|
|
This defect only occurs on the "zh-cn" locale. Dojo accepts "下午"(pm) in the textbox, but it automatically changes it to
|
||
|
|
"上午"(am) after the focus changed. The date value of the textbox is also changed.
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
The root cause of this issue is that the parser method's code assumes am/pm symbol always appears after the hour value.
|
||
|
|
But this is not true, for example, the pattern for "zh-cn" puts am/pm field before all the other fields.
|
||
|
|
</p>
|
||
|
|
</body>
|
||
|
|
</html>
|
||
|
|
|