408 lines
16 KiB
HTML
408 lines
16 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
|
|
<title>13899 mvc Stateful Dates</title>
|
|
|
|
<style>
|
|
@import "../../../dijit/themes/claro/document.css";
|
|
@import "../../../util/doh/robot/robot.css";
|
|
@import "../../../dijit/tests/css/dijitTests.css";
|
|
</style>
|
|
|
|
<!-- required: the default dijit theme: -->
|
|
<link id="themeStyles" rel="stylesheet" href="../../../dijit/themes/claro/claro.css"/>
|
|
|
|
<!-- required: dojo.js -->
|
|
<script type="text/javascript" src="../../../dojo/dojo.js"
|
|
data-dojo-config="isDebug: true, parseOnLoad: false"></script>
|
|
|
|
<!-- only needed for alternate theme testing: -->
|
|
<script type="text/javascript" src="../../../dijit/tests/_testCommon.js"></script>
|
|
|
|
<script type="text/javascript">
|
|
var model;
|
|
|
|
require([
|
|
'dijit/form/DateTextBox',
|
|
'dijit/CalendarLite',
|
|
'dojox/mvc/StatefulModel',
|
|
'dijit/form/Button',
|
|
'dojox/mvc/Output',
|
|
'dijit/form/TextBox',
|
|
'dojo/date/stamp',
|
|
'dojox/mvc',
|
|
'dojo/on',
|
|
'dojo/domReady!'
|
|
], function (DateTextBox, Calendar, StatefulModel, Button, Output, TextBox, dateStamp) {
|
|
|
|
// *** Test1 setup begin: ***
|
|
var test1_init = dateStamp.fromISOString("1987-08-01"); // 8/1/1987
|
|
test1_model = new StatefulModel({
|
|
data: {
|
|
date: test1_init
|
|
}
|
|
});
|
|
var test1_cal = new Calendar({
|
|
ref: test1_model.date // bind to model.date
|
|
}, document.getElementById('test1_cal'));
|
|
test1_cal.startup();
|
|
|
|
var test1_cal2 = new Calendar({
|
|
ref: test1_model.date // bind to model.date
|
|
}, document.getElementById('test1_cal2'));
|
|
test1_cal2.startup();
|
|
|
|
var test1_txt2 = new TextBox({
|
|
ref: test1_model.date
|
|
}, document.getElementById('test1_txt2'));
|
|
dojo.style(test1_txt2.domNode, "width", "368px");
|
|
test1_txt2.startup();
|
|
|
|
var test1_out2 = new Output({
|
|
ref: test1_model.date // bind to model.date
|
|
}, document.getElementById('test1_output2'));
|
|
test1_out2.startup();
|
|
|
|
var test1_setday2 = new Button({
|
|
label: 'Set Calendar to dateStamp.fromISOString("1991-09-07") (Sep 7 1991)',
|
|
onClick: function() {
|
|
//console.log("test1_setday2 called");
|
|
//var day2 = new Date(1991,9,7); // 9/7/1991
|
|
//var day2 = new Date("1991-09-07"); // 9/7/1991
|
|
var day2 = dateStamp.fromISOString("1991-09-07"); // 9/7/1991
|
|
test1_cal2.set("value", day2);
|
|
}
|
|
}, document.getElementById('test1_setdate1'));
|
|
test1_setday2.startup();
|
|
|
|
var test1_settext2 = new Button({
|
|
label: 'Set TextBox to dateStamp.fromISOString("1991-05-05") (May 5, 1991)',
|
|
onClick: function() {
|
|
//test1_txt2.set("value", new Date("1993-05-05")); // ISO date format
|
|
test1_txt2.set("value", dateStamp.fromISOString("1991-05-05")); // 5/5/1993
|
|
//test1_cal2.set("value", "1991-05-05");
|
|
//test1_txt2.set("value", "Sun May 05 1991 00:00:00 GMT-0400 (Eastern Daylight Time)");
|
|
}
|
|
}, document.getElementById('test1_setdate2'));
|
|
test1_settext2.startup();
|
|
|
|
var test1_settext3 = new Button({
|
|
label: 'Set TextBox to ISO String("2011-11-06") (Nov 6, 2011) fails on IE',
|
|
onClick: function() {
|
|
//test1_txt2.set("value", new Date("2011-11-07")); // ISO date format
|
|
test1_txt2.set("value", "2011-11-07"); // 11/6/2011
|
|
//test1_cal2.set("value", "2011-11-07");
|
|
//test1_txt2.set("value", "Sun Nov 06 2011 01:00:00 GMT-0500 (Eastern Standard Time)");
|
|
}
|
|
}, document.getElementById('test1_setdate3'));
|
|
test1_settext3.startup();
|
|
|
|
var test1_reset2 = new Button({
|
|
label: "Reset Calendar back to (Aug 1 1987)",
|
|
onClick: function() {
|
|
test1_model.date.reset();
|
|
}
|
|
}, document.getElementById('test1_reset2'));
|
|
test1_reset2.startup();
|
|
// *** Test1 setup end: ***
|
|
|
|
// *** Test2 setup begin: ***
|
|
var test2_init = dateStamp.fromISOString("2011-11-06"); // Nov 6, 2011
|
|
test2_model = new StatefulModel({
|
|
data: {
|
|
date: test2_init
|
|
}
|
|
});
|
|
var test2_cal = new DateTextBox({
|
|
ref: test2_model.date // bind to model.date
|
|
}, document.getElementById('test2_cal'));
|
|
test2_cal.startup();
|
|
|
|
var test2_cal2 = new DateTextBox({
|
|
ref: test2_model.date // bind to model.date
|
|
}, document.getElementById('test2_cal2'));
|
|
test2_cal2.startup();
|
|
|
|
var test2_txt2 = new TextBox({
|
|
ref: test2_model.date
|
|
}, document.getElementById('test2_txt2'));
|
|
dojo.style(test2_txt2.domNode, "width", "368px");
|
|
test2_txt2.startup();
|
|
|
|
var test2_out2 = new Output({
|
|
ref: test2_model.date // bind to model.date
|
|
}, document.getElementById('test2_output2'));
|
|
test2_out2.startup();
|
|
|
|
var test2_setday2 = new Button({
|
|
label: 'Set DateTextBox to new Date(1993,9,28) (Oct 28, 1993)',
|
|
onClick: function() {
|
|
var day2 = new Date(1993,9,28); // 10/28/1993
|
|
//var day2 = new Date("1993-10-28"); // 10/28/1993
|
|
//var day2 = dateStamp.fromISOString("1993-09-28"); // 10/28/1997
|
|
//test2_cal2.set("value", day2);
|
|
test2_txt2.set("value", day2);
|
|
}
|
|
}, document.getElementById('test2_setdate1'));
|
|
test2_setday2.startup();
|
|
|
|
var test2_settext2 = new Button({
|
|
label: 'Set DateTextBox to dateStamp.fromISOString("1997-10-14") (Oct 14 1997)',
|
|
onClick: function() {
|
|
//test2_txt2.set("value", new Date("1997-10-14")); // ISO date format
|
|
test2_txt2.set("value", dateStamp.fromISOString("1997-10-14")); // Oct 14 1997
|
|
//test2_cal2.set("value", "1997-10-14");
|
|
//test2_txt2.set("value", "Tue Oct 14 1997 00:00:00 GMT-0400 (Eastern Daylight Time)");
|
|
}
|
|
}, document.getElementById('test2_setdate2'));
|
|
test2_settext2.startup();
|
|
|
|
var test2_reset2 = new Button({
|
|
label: "Reset DateTextBox back to (Nov 6 2011)",
|
|
onClick: function() {
|
|
test2_model.date.reset();
|
|
}
|
|
}, document.getElementById('test2_reset2'));
|
|
|
|
var test2_settext3 = new Button({
|
|
label: 'Set TextBox to ISO String("1991-05-05") (May 5, 1991)',
|
|
onClick: function() {
|
|
//test2_txt2.set("value", new Date("1991-05-05")); // ISO date format
|
|
test2_txt2.set("value", "1991-05-05"); // 5/5/1993
|
|
//test2_cal2.set("value", "1991-05-05");
|
|
//test2_txt2.set("value", "Sun May 05 1991 00:00:00 GMT-0400 (Eastern Daylight Time)");
|
|
}
|
|
}, document.getElementById('test2_setdate3'));
|
|
test2_settext3.startup();
|
|
|
|
test2_reset2.startup();
|
|
// *** Test2 setup end: ***
|
|
|
|
|
|
// *** Test3 setup begin: ***
|
|
// *** Test3 setup begin: ***
|
|
var test3_init = dateStamp.fromISOString("2011-08-27"); // 8/27/2011
|
|
test3_model = new StatefulModel({
|
|
data: {
|
|
date: test3_init,
|
|
date2: test3_init
|
|
}
|
|
});
|
|
var test3_cal = new Calendar({
|
|
ref: test3_model.date // bind to model.date
|
|
}, document.getElementById('test3_cal'));
|
|
test3_cal.startup();
|
|
|
|
var test3_cal2 = new DateTextBox({
|
|
ref: test3_model.date // bind to model.date
|
|
}, document.getElementById('test3_cal2'));
|
|
test3_cal2.startup();
|
|
|
|
var test3_txt2 = new TextBox({
|
|
ref: test3_model.date,
|
|
disabled: true
|
|
}, document.getElementById('test3_txt2'));
|
|
dojo.style(test3_txt2.domNode, "width", "368px");
|
|
test3_txt2.startup();
|
|
|
|
var test3_out2 = new Output({
|
|
ref: test3_model.date // bind to model.date
|
|
}, document.getElementById('test3_output2'));
|
|
test3_out2.startup();
|
|
|
|
var test3_setday2 = new Button({
|
|
label: 'Set Calendar to dateStamp.fromISOString("1997-10-14") (Oct 14 1997)',
|
|
onClick: function() {
|
|
//console.log("test3_setday2 called");
|
|
//var day2 = new Date(1997,10,14); // 10/14/1997
|
|
//var day2 = new Date("1997-10-14"); // 10/14/1997
|
|
var day2 = dateStamp.fromISOString("1997-10-14"); // 10/14/1997
|
|
test3_cal2.set("value", day2);
|
|
}
|
|
}, document.getElementById('test3_setdate1'));
|
|
test3_setday2.startup();
|
|
|
|
var test3_settext2 = new Button({
|
|
label: 'Set TextBox to dateStamp.fromISOString("2011-11-06") (Nov 6, 2011)',
|
|
onClick: function() {
|
|
//test3_txt2.set("value", new Date("2011-11-06")); // ISO date format
|
|
test3_txt2.set("value", dateStamp.fromISOString("2011-11-06")); // 11/6/2011
|
|
//test3_cal2.set("value", "2011-11-06");
|
|
//test3_txt2.set("value", "2011-11-06"); // FAILS
|
|
//test3_txt2.set("value", "1991-05-06"); // 5/5/1991
|
|
//test3_txt2.set("value", "Sun Nov 06 2011 00:00:00 GMT-0400 (Eastern Daylight Time)");
|
|
}
|
|
}, document.getElementById('test3_setdate2'));
|
|
test3_settext2.startup();
|
|
|
|
var test3_settext3 = new Button({
|
|
label: 'Set TextBox to ISO String("1991-05-06T01:00:00") via new Date (May 5, 1991)',
|
|
onClick: function() {
|
|
//test3_txt2.set("value", new Date("1991-05-05")); // ISO date format
|
|
var d = new Date("1991-05-06T01:00:00");
|
|
test3_txt2.set("value", d); // 5/5/1991 YYYY-MM-DDThh:mm:ss via new Date
|
|
//test3_txt2.set("value", "1991-05-06T01:00:00"); // 5/5/1991 YYYY-MM-DDThh:mm:ss FAILS
|
|
//test3_cal2.set("value", "1991-05-05");
|
|
//test3_txt2.set("value", "Sun May 05 1991 00:00:00 GMT-0400 (Eastern Daylight Time)");
|
|
}
|
|
}, document.getElementById('test3_setdate3'));
|
|
test3_settext3.startup();
|
|
if(dojo.isIE){ // new Date("1991-05-06") will not work on IE
|
|
test3_settext3.set('disabled',true);
|
|
}
|
|
|
|
var test3_reset2 = new Button({
|
|
label: "Reset Calendar back to (Aug 27 2011)",
|
|
onClick: function() {
|
|
//console.log("test3_callreset2 called");
|
|
test3_model.date.reset();
|
|
}
|
|
}, document.getElementById('test3_reset2'));
|
|
test3_reset2.startup();
|
|
// *** Test3 setup end: ***
|
|
|
|
|
|
|
|
// *** Test4 setup begin: RegExp Test***
|
|
// *** Test4 setup begin: RegExp Test***
|
|
var regx = new RegExp("abc","i");
|
|
test4_model = new StatefulModel({
|
|
data: {
|
|
//regex: /abc/i // should be regex: /abc/
|
|
regex: regx // should be regex: /abc/
|
|
}
|
|
});
|
|
|
|
console.log('test4_model.regex', test4_model.regex.get('value'));
|
|
var str = "ABCDEFGHIJKLMNOP abcdefghi";
|
|
var patt1 = test4_model.regex.get('value');
|
|
console.log("str.match(test4_model.regex.get('value')) is ",str.match(test4_model.regex.get('value')));
|
|
console.log('str.match(patt1)',str.match(patt1));
|
|
test4_model.regex.set('value',/def/);
|
|
console.log("set to def str.match(test4_model.regex.get('value')) is ",str.match(test4_model.regex.get('value')));
|
|
test4_model.regex.reset();
|
|
console.log("after reset str.match(test4_model.regex.get('value')) is ",str.match(test4_model.regex.get('value')));
|
|
// *** Test4 setup end: ***
|
|
|
|
});
|
|
</script>
|
|
</head>
|
|
|
|
<body class="claro">
|
|
<h2>Test 1: Two Calendars bound to each other, a TextBox and an mvc Output field.</h2>
|
|
<div style="border-style: solid; border-width: 2px; width: 827px;">
|
|
<table>
|
|
<tbody>
|
|
<tr>
|
|
<td><div id="test1_cal"></div></td>
|
|
<td><div id="test1_cal2"></div></td>
|
|
<td>
|
|
<table><tbody>
|
|
<tr><td><label for="test1_txt2">TextBox bound to date:</label></td></tr>
|
|
<tr><td><div id="test1_txt2"></div></td></tr>
|
|
<tr><td><label for="test1_txt2">MVC Output bound to date:</label></td></tr>
|
|
<tr><td><div id="test1_output2"></div></td></tr>
|
|
</tbody></table>
|
|
<table><tbody><tr>
|
|
<td><div id="test1_setdate1"></div></td>
|
|
</tr></tbody></table>
|
|
<table><tbody><tr>
|
|
<td><div id="test1_setdate2"></div></td>
|
|
</tr></tbody></table>
|
|
<table><tbody><tr>
|
|
<td><div id="test1_setdate3"></div></td>
|
|
</tr></tbody></table>
|
|
<table><tbody><tr>
|
|
<td><div id="test1_reset2"></div></td>
|
|
</tr></tbody></table>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<h2>Test 2: Two DateTextBoxes bound to each other, a TextBox and an mvc Output field.</h2>
|
|
<div style="border-style: solid; border-width: 2px; width: 827px;">
|
|
<table>
|
|
<tbody>
|
|
<tr>
|
|
<td style="vertical-align: top;"><div id="test2_cal"></div></td>
|
|
<td style="vertical-align: top;"><div id="test2_cal2"></div></td>
|
|
<td>
|
|
<table><tbody>
|
|
<tr><td><label for="test2_txt2">TextBox bound to date:</label></td></tr>
|
|
<tr><td><div id="test2_txt2"></div></td></tr>
|
|
<tr><td><label for="test2_txt2">MVC Output bound to date:</label></td></tr>
|
|
<tr><td><div id="test2_output2"></div></td></tr>
|
|
</tbody></table>
|
|
<table><tbody><tr>
|
|
<td><div id="test2_setdate1"></div></td>
|
|
</tr></tbody></table>
|
|
<table><tbody><tr>
|
|
<td><div id="test2_setdate2"></div></td>
|
|
</tr></tbody></table>
|
|
<table><tbody><tr>
|
|
<td><div id="test2_setdate3"></div></td>
|
|
</tr></tbody></table>
|
|
<table><tbody><tr>
|
|
<td><div id="test2_reset2"></div></td>
|
|
</tr></tbody></table>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
|
|
<h2>Test 3: One Calendar bound to a DateTextbox, a TextBox and an mvc Output field.</h2>
|
|
<div style="border-style: solid; border-width: 2px; width: 827px;">
|
|
<table>
|
|
<tbody>
|
|
<tr>
|
|
<td style="vertical-align: top;"><div id="test3_cal"></div></td>
|
|
<td style="vertical-align: top;"><div id="test3_cal2"></div></td>
|
|
<td>
|
|
<table><tbody>
|
|
<tr><td><label for="test3_txt2">TextBox bound to date: (disabled to avoid error)</label></td></tr>
|
|
<tr><td><div id="test3_txt2"></div></td></tr>
|
|
<tr><td><label for="test3_txt2">MVC Output bound to date:</label></td></tr>
|
|
<tr><td><div id="test3_output2"></div></td></tr>
|
|
</tbody></table>
|
|
<table><tbody><tr>
|
|
<td><div id="test3_setdate1"></div></td>
|
|
</tr></tbody></table>
|
|
<table><tbody><tr>
|
|
<td><div id="test3_setdate2"></div></td>
|
|
</tr></tbody></table>
|
|
<table><tbody><tr>
|
|
<td><div id="test3_setdate3"></div></td>
|
|
</tr></tbody></table>
|
|
<table><tbody><tr>
|
|
<td><div id="test3_reset2"></div></td>
|
|
</tr></tbody></table>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<!--
|
|
<h2>I see these problems Binding a TextBox to DateTextBox and Calendar:</h2>
|
|
<div style="border-style: solid; border-width: 2px; width: 827px;">
|
|
<span>There is also a problem when trying to set a date string in this format:</span><br>
|
|
<span>"Wed May 05 2010 01:00:00 GMT-0400 (Eastern Daylight Time)" into a into a TextBox bound to a dijit.form.DateTextbox, but that works in a Calendar.</span><br>
|
|
<span>It is ending up with the DateTextBox set to null. : </span><br>
|
|
<span></span><br>
|
|
<span>There is also a problem when trying to set a date ISO format date string like "1991-05-05":</span><br>
|
|
<span>"into a into a TextBox bound to a Calendar, but that works for a dijit.form.DateTextbox.</span><br>
|
|
<span>It is loops for a while and gets range errors in the console. : </span><br>
|
|
<span></span><br>
|
|
<span>Another thing I have found was that on a calendar I would get a different value from dijit.byId("cal").get('value') and dijit.byId("cal").value.</span><br>
|
|
<span>dijit.byId("cal").value: Wed May 05 2010 <b>01:00:00</b> GMT-0400 (Eastern Daylight Time)</span><br>
|
|
<span>dijit.byId("cal").get('value'): Wed May 05 2010 <b>00:00:00</b> GMT-0400 (Eastern Daylight Time)</span><br>
|
|
<span>dijit.byId("cal").get('value') is getting 00:00:00 when it seems like it should be 01:00:00</span><br>
|
|
</div>
|
|
-->
|
|
</body>
|
|
</html>
|