dojox
Version:
Dojo eXtensions, a rollup of many useful sub-projects and varying states of maturity – from very stable and robust, to alpha and experimental. See individual projects contain README files for details.
408 lines (366 loc) • 15.4 kB
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>