dijit
Version:
Dijit provides a complete collection of user interface controls based on Dojo, giving you the power to create web applications that are highly optimized for usability, performance, internationalization, accessibility, but above all deliver an incredible u
472 lines (426 loc) • 19 kB
HTML
<html lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Test DateTextBox Widget</title>
<style type="text/css">
@import "../../themes/claro/document.css";
@import "../css/dijitTests.css";
.testExample {
background-color:#fbfbfb;
padding:1em;
margin-bottom:1em;
border:1px solid #bfbfbf;
}
.noticeMessage {
color:#093669;
font-size:0.95em;
margin-left:0.5em;
}
.dojoTitlePaneLabel label {
font-weight:bold;
}
</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="async: true, isDebug: true, parseOnLoad: true, extraLocale: ['de-de', 'en-us']"></script>
<!-- only needed for alternate theme testing: -->
<script type="text/javascript" src="../_testCommon.js"></script>
<script type="text/javascript">
function eventHandler(e){
// use this.domNode.getAttribute('widgetId') to show "this" is the widget
// mouseleave/enter map to mouseout/over in all browsers except IE
console.log(this.domNode.getAttribute('widgetId') + ' ' + e.type);
}
require([
"doh/runner",
"dojo/date",
"dojo/date/locale",
"dojo/_base/lang",
"dojo/on",
"dojo/parser",
"dijit/registry",
"dijit/form/DateTextBox",
"dijit/form/Form",
"dijit/tests/helpers",
"dojo/domReady!"
], function(doh, date, locale, lang, on, parser, registry, DateTextBox){
// Add test=true to the URL to run unit tests.
var test = /mode=test/i.test(window.location.href);
parser.parse();
// See if we can make a widget in script and attach it to the DOM ourselves.
on(registry.byId('pattern'), "onMouseEnter", eventHandler);
on(registry.byId('pattern'), "onMouseLeave", eventHandler);
on(registry.byId('pattern'), "onKeyDown", eventHandler);
var props = {
name: "date4",
value: new Date(2006,10,29),
constraints: {min:new Date(2004,0,1),max:new Date(2006,11,31)},
lang: "de-de",
hasDownArrow: false,
onMouseEnter: eventHandler,
onMouseLeave: eventHandler,
onKeyDown: eventHandler,
promptMessage: "dd.mm.yy",
rangeMessage: "Enter a date in the year range 2004-2006.",
invalidMessage: "Invalid date. Use dd.mm.yy format."
};
var german = new DateTextBox(props, "german");
german.startup();
var localLong = registry.byId("localLong");
var american = registry.byId("american");
localLong.parse = function(value,constraints){
return this.dateLocaleModule.parse(value, (constraints.formatLength="long") && constraints) ||
this.dateLocaleModule.parse(value, (constraints.formatLength="short") && constraints) ||
(this._isEmpty(value) ? null : undefined); // Date
};
if(test){
doh.register("constraints", [
{
name: "initial state",
timeout: 1000,
runTest: function(t){
var expected = new Date(2005,11,30);
var actual = localLong.get('value');
t.is(0, date.compare(expected, actual), 'expected ' + expected.toDateString() + ' but got ' + actual.toDateString());
t.is("", localLong.get('state'));
}
},
{
name: "change value, now invalid",
timeout: 1000,
runTest: function(t){
var expected = new Date(2007,6,15);
localLong.set("value", expected);
var actual = localLong.get('value');
t.is(0, date.compare(expected, actual), 'expected ' + expected.toDateString() + ' but got ' + actual.toDateString());
t.is("Error", localLong.get('state'));
}
},
{
name: "change max, still invalid",
timeout: 1000,
runTest: function(t){
localLong.set("constraints", lang.mixin(localLong.get('constraints'), { max: new Date(2007,5,30)}));
var expected = new Date(2007,6,15);
var actual = localLong.get('value');
t.is(0, date.compare(expected, actual), 'expected ' + expected.toDateString() + ' but got ' + actual.toDateString());
t.is("Error", localLong.get('state'));
}
},
{
name: "change max, now valid",
timeout: 1000,
runTest: function(t){
localLong.set("constraints", lang.mixin(localLong.get('constraints'), { max: new Date(2007,11,31)}));
var expected = new Date(2007,6,15);
var actual = localLong.get('value');
t.is(0, date.compare(expected, actual), 'expected ' + expected.toDateString() + ' but got ' + actual.toDateString());
t.is("", localLong.get('state'));
}
},
{
name: "change max, now invalid",
timeout: 1000,
runTest: function(t){
localLong.set("constraints", lang.mixin(localLong.get('constraints'), { max: new Date(2006,11,30)}));
var expected = new Date(2007,6,15);
var actual = localLong.get('value');
t.is(0, date.compare(expected, actual), 'expected ' + expected.toDateString() + ' but got ' + actual.toDateString());
t.is("Error", localLong.get('state'));
}
},
{
name: "change value, now valid",
timeout: 1000,
runTest: function(t){
var expected = new Date(2005,11,30);
localLong.set("value", expected);
var actual = localLong.get('value');
t.is(0, date.compare(expected, actual), 'expected ' + expected.toDateString() + ' but got ' + actual.toDateString());
t.is("", localLong.get('state'));
}
}
]);
doh.register("misc",
function noYear(){
var widget = registry.byId("noyear");
doh.t(widget.isValid(false), "isValid");
doh.is(2011, widget.get('value').getFullYear(), "programmatic value");
doh.is(2011, widget.value.getFullYear(), "JS value");
},
function noParams(){
// Just making sure we don't get an exception when no parameters are specified.
new DateTextBox();
}
);
doh.register("API", [
function initial(){
// initial conditions
doh.is(0, date.compare(new Date(2005,11,30), american.get('value')), 'wire value of american: ' + american.get('value'));
doh.is('12/30/2005', american.get('displayedValue'), 'displayed value of american');
},
function setValue(){
american.set('value', new Date(2004,9,20));
doh.is(0, date.compare(new Date(2004,9,20), american.get('value')),
'wire value of american is: ' + american.get('value') +
' but should be: ' + new Date(2004,9,20));
doh.is('10/20/2004', american.get('displayedValue'), 'displayed value of american');
doh.t(american.isValid(), 'marked as valid');
},
function setDisplayedValue(){
american.set('displayedValue', '11/12/2006');
doh.is(0, date.compare(new Date(2006, 10, 12), american.get('value')), 'wire value of american');
doh.is('11/12/2006', american.get('displayedValue'), 'displayed value of american');
doh.t(american.isValid(), 'marked as valid');
},
function setInvalidDisplayedValue(){
american.set('displayedValue', 'foo');
doh.t(american.get('value') === undefined, 'value is undefined if displayedValue is garbage');
doh.f(american.isValid(), 'marked as invalid');
// setting the value to get('value') should never change anything, so
// therefore setting the value to undefined shouldn't affect the displayed value
american.set('value', undefined);
doh.is(american.get('displayedValue'), 'foo');
},
function setOutOfRange(){
// This widget is set to be valid between 2004 and 2006 only
american.set('displayedValue', '12/1/2008');
doh.f(american.isValid(), 'marked as invalid since out of range');
doh.is('12/1/2008', american.get('displayedValue'), 'displayed value of american');
},
function noInitialValue(){
var fromDate = registry.byId('fromDate');
doh.is('', fromDate.get('displayedValue'), 'initially blank');
doh.is(new Date('').toString(), fromDate.value.toString(), 'default value');
var d = new doh.Deferred();
var today = new Date();
fromDate.set('value', today, true);
setTimeout(d.getTestCallback(function(){
var toDate = registry.byId('toDate');
doh.is(today.toDateString(), fromDate.value.toDateString(), 'changed value');
doh.is(today.toDateString(), toDate.constraints.min.toDateString(), 'onChange');
}), 500);
return d;
},
function ariaRolesAndAttributes(){
var d = new doh.Deferred(),
button = registry.byId("local");
doh.is("combobox", button._popupStateNode.getAttribute("role"), "button _popupStateNode role");
doh.t(button._popupStateNode.getAttribute("aria-haspopup"), "aria-haspopup on button");
doh.f(button._popupStateNode.getAttribute("aria-expanded"), "initially missing aria-expanded");
doh.f(button._popupStateNode.getAttribute("aria-owns"), "initally missing aria-owns");
button.openDropDown();
setTimeout(d.getTestCallback(function(){
doh.t(button._popupStateNode.getAttribute("aria-expanded"), "now aria-expanded should be true");
doh.is("local_popup", button._popupStateNode.getAttribute("aria-owns"), "should aria-own the Dlg");
// Check roles and attributes on the dialog
var dlg = registry.byId("local_popup");
doh.t(dlg.domNode.hasAttribute("role"), "Dlg.domNode should have a role");
doh.is("local_popup_mddb local_popup_year", dlg.domNode.getAttribute("aria-labelledby"), "aria-labelledby should not overwrite existing labelledby for the Calendar");
button.closeDropDown();
}), 500);
return d;
}
]);
doh.register("localization", [
function initialGerman(){
doh.is(0, date.compare(new Date(2006,10,29), german.get('value')), 'wire value of german: ' + german.get('value'));
doh.is('29.11.2006', german.get('displayedValue'), 'displayed value of german');
},
function setValueGerman(){
german.set('value', new Date(2004,9,20));
doh.is(0, date.compare(new Date(2004,9,20), german.get('value')),
'wire value of german is: ' + german.get('value') +
' but should be: ' + new Date(2004,9,20));
doh.is('20.10.2004', german.get('displayedValue'), 'displayed value of german');
doh.t(german.isValid(), 'marked as valid');
},
function setDisplayedValueGerman(){
german.set('displayedValue', '12.11.2006');
doh.is(0, date.compare(new Date(2006, 10, 12), german.get('value')), 'wire value of german');
doh.is('12.11.2006', german.get('displayedValue'), 'displayed value of german');
doh.t(german.isValid(), 'marked as valid');
},
{
name: "labels",
timeout: 6000,
runTest: function(){
german.set('value', new Date(2006, 9, 15)); // 10/15/2006
german.openDropDown();
var calendar = registry.byId("german_popup");
// calendar exists and is shown
doh.t(calendar && isVisible(calendar), "calendar is visible");
// Month label
doh.is("Oktober", innerText(query(".dijitCalendarCurrentMonthLabel", calendar.domNode)[0]));
// Day labels
var dayLabels = query(".dijitCalendarDayLabelTemplate", calendar.domNode);
doh.is(7, dayLabels.length, "7 day labels");
doh.is("M", innerText(dayLabels[0]), "day 0");
doh.is("D", innerText(dayLabels[1]), "day 1");
doh.is("M", innerText(dayLabels[2]), "day 2");
doh.is("D", innerText(dayLabels[3]), "day 3");
doh.is("F", innerText(dayLabels[4]), "day 4");
doh.is("S", innerText(dayLabels[5]), "day 5");
doh.is("S", innerText(dayLabels[6]), "day 6");
german.closeDropDown();
}
}
]);
doh.run();
}
});
</script>
</head>
<body class="claro" role="main">
<script type="dojo/require">
dom: "dojo/dom",
query: "dojo/query",
registry: "dijit/registry"
</script>
<h1 class="testTitle">Test DateTextBox Widget</h1>
<!-- to test form submission, you'll need to create an action handler similar to
http://www.utexas.edu/teamweb/cgi-bin/generic.cgi -->
<form id="form1" data-dojo-type='dijit/form/Form' data-dojo-props='action:"", name:"example", method:"", onSubmit:function(){ return this.validate() }'>
<div class="dojoTitlePaneLabel">
<label for="local"> Date (local format) </label>
<span class="noticeMessage">DateTextBox class, no attributes</span>
</div>
<div class="testExample">
<input id="local" data-dojo-type="dijit/form/DateTextBox" style="width: 100px"
data-dojo-props='name:"noDOMvalue", value:"2008-12-31", type:"text", onMouseEnter:eventHandler,
onMouseLeave:eventHandler,
onKeyDown:eventHandler,
onChange:function(val){ dom.byId("oc1").value = "" + val; }
'/>
<label for="oc1">onChange:</label><input id="oc1" size="34" disabled value="not fired yet!" autocomplete="off"/>
<span style='white-space:nowrap;'>
<button type="button" onclick="registry.byId('local').set('value', null);">set('value',null)</button>
<button type="button" onclick="dom.byId('gv1').value=''+registry.byId('local').get('value');">get('value')</button>
<button type="button" onclick="dom.byId('gv1').value=''+registry.byId('local').value;">.value</button>
<label for="gv1">l:</label><input id="gv1" size="34" disabled value="not called yet!" autocomplete="off"/>
</span>
</div>
<div class="dojoTitlePaneLabel">
<label for="localLong"> Date (local format - long) </label>
<span class="noticeMessage">DateTextBox class,
Attributes: required="true", trim="true", constraints={min:'2004-01-01',max:'2006-12-31',formatLength:'long'}. Works for leap years</span>
</div>
<div class="testExample">
<input id="localLong" data-dojo-id="localLong" data-dojo-type="dijit/form/DateTextBox"
data-dojo-props='type:"text", name:"date1", value:"2005-12-30",
constraints:{min:"2004-01-01",max:"2006-12-31",formatLength:"long"},
required:true,
trim:true,
onChange:function(val){ dom.byId("oc2").value = val; },
onMouseEnter:eventHandler,
onMouseLeave:eventHandler,
onKeyDown:eventHandler,
invalidMessage:"Invalid date." '/>
<label for="oc2">onChange:</label><input id="oc2" size="34" disabled value="not fired yet!" autocomplete="off"/>
<input type="button" value="Destroy" onClick="registry.byId('localLong').destroy(); return false;"/>
<input type="button" value="set max to 2007-12-31" onClick="registry.byId('localLong').constraints.max = new Date(2007,11,31); registry.byId('localLong').validate(false); return false;"/>
</div>
<div class="dojoTitlePaneLabel">
<label for="american"> Date (American format) </label>
<span class="noticeMessage">DateTextBox class,
Attributes: lang="en-us", required="true", constraints={min:'2004-01-01',max:'2006-12-31'}. Works for leap years.
Prompt message whenever field is blank.
</span>
</div>
<div class="testExample">
<input id="american" data-dojo-type="dijit/form/DateTextBox"
data-dojo-props='type:"text", name:"date2", value:"2005-12-30",
constraints:{min:"2004-01-01",max:"2006-12-31"},
lang:"en-us",
required:true,
onMouseEnter:eventHandler,
onMouseLeave:eventHandler,
onKeyDown:eventHandler,
promptMessage:"mm/dd/yyyy",
invalidMessage:"Invalid date. Use mm/dd/yyyy format."'/>
</div>
<div class="dojoTitlePaneLabel">
<label for="german"> Date (German format)</label>
<span class="noticeMessage">DateTextBox class,
Attributes: lang="de-de", hasDownArrow=false, constraints={min:2004-01-01, max:2006-12-31}. Works for leap years.
Prompt message whenever field is blank.
</span>
</div>
<div class="testExample">
<input id="german"/>
</div>
<div class="dojoTitlePaneLabel">
<label for="pattern"> Date, overriding pattern</label>
<span class="noticeMessage">Date, overriding pattern with dd-MM-yyyy</span>
</div>
<div class="testExample">
<input id="pattern" data-dojo-type="dijit/form/DateTextBox" data-dojo-props='name:"noDOMvalue", type:"text", constraints:{datePattern:"dd-MM-yyyy", strict:true}'/>
</div>
<div class="dojoTitlePaneLabel">
<strong>Using title attribute for label</strong>
<span class="noticeMessage">DateTextBox class,
Attributes: lang="en-us", required="true", prompt message, invalid message
Prompt message whenever field is blank.
</span>
</div>
<div class="testExample">
<div id="american2" data-dojo-type="dijit/form/DateTextBox"
data-dojo-props='type:"text", name:"date20", value:"2008-12-30",
title:"Date in month, day, year format",
lang:"en-us",
required:true,
promptMessage:"mm/dd/yyyy",
invalidMessage:"Invalid date. Use mm/dd/yyyy format."'>
</div>
</div>
<script>
function displayData(){
var f = document.getElementById("form1");
var s = "";
for(var i = 0; i < f.elements.length; i++){
var elem = f.elements[i];
if(elem.name == "button") { continue; }
s += elem.name + ": " + elem.value + "\n";
}
alert(s);
}
</script>
<div class="dojoTitlePaneLabel">
Date pairs, from/to (won't submit unless from/to fields filled in correctly):
</div>
<div class="testExample">
<label for="fromDate">From:</label> <input id="fromDate" data-dojo-type="dijit/form/DateTextBox"
data-dojo-props='type:"text", name:"fromDate", required:true,
onChange:function(){ registry.byId("toDate").constraints.min = this.get("value"); } '/>
<label for="toDate">To:</label> <input id="toDate" data-dojo-type="dijit/form/DateTextBox"
data-dojo-props='type:"text", name:"toDate", required:true,
onChange:function(){ registry.byId("fromDate").constraints.max = this.get("value"); } '/>
</div>
<div class="dojoTitlePaneLabel">
<label for="noyear">Pick a day in 3Q 2011</label>
</div>
<div class="testExample">
<input data-dojo-type="dijit/form/DateTextBox" id="noyear" data-dojo-props='
name:"noyear",
required:"true",
constraints:{datePattern:"MMMM dd",
min:new Date(2011,9,1),
max:new Date(2011,11,31)
},
parse:function(){
var d = this.inherited("parse", arguments);
if(d instanceof Date)d.setFullYear(2011);
return d;
},
value:new Date(2011,10,25)'
/>
</div>
<button type="button" name="button" onclick="displayData(); return false;">view data</button>
<input type="submit" name="submit" />
<input type="reset" name="reset" />
</form>
</body>
</html>