Dojo/Dijit - DateTextBox hides my initial value
Question
Demo: http://3wcloud-com-provisioning-qa.appspot.com/testDijitDate
The calendar pop-up works fine and lets me pick a new date. But when the page loads, I see the date 08/15/2009 flash for just a moment, then it disappears. Is there some reason the CSS or JS would hide it by default?
dojo.require("dijit.form.DateTextBox");
<link href="http://ajax.googleapis.com/ajax/libs/dojo/1.9.3/dojo/resources/dojo.css" rel="stylesheet" /> <link href="http://ajax.googleapis.com/ajax/libs/dojo/1.9.3/dijit/themes/claro/claro.css" rel="stylesheet" /> <script src="//ajax.googleapis.com/ajax/libs/dojo/1.9.3/dojo/dojo.js" djConfig="parseOnLoad:true"></script> <body class="claro"> <input id="startDate" name="startDate" dojoType="dijit.form.DateTextBox" required=true value="08/15/2009" />
I'm still learning to use FireBug as well. Can I find out the value by browsing the DOM?
Firebug shows:
<!-- <input type=text name=startDate size=10 value=""> --> <div wairole="presentation" dojoattachevent="onmouseenter:_onMouse,onmouseleave:_onMouse,onmousedown:_onMouse" id="widget_startDate" class="dijit dijitReset dijitInlineTable dijitLeft dijitTextBox dijitDateTextBox" role="presentation" widgetid="startDate"> <div style="overflow: hidden;"> <div class="dijitReset dijitValidationIcon"> <br/> </div> <div class="dijitReset dijitValidationIconText">Χ</div> <div class="dijitReset dijitInputField"> <input type="text" autocomplete="off" dojoattachpoint="textbox,focusNode" class="dijitReset" aria-valuenow="" aria-invalid="true" id="startDate" tabindex="0" aria-required="true" value="" /> <input type="text" style="display: none;" name="startDate" /> </div> </div> </div>
2 answers
solution1
3 ACCPTED
Dojo uses ISO8601/RFC3339-style dates exclusively in markup. Any time a date value is required in markup, you should specify it exclusively as yyyy-mm-dd When setting a date attribute from JavaScript, you should use a Date object:
dojo.require("dijit.form.DateTextBox"); dojo.addOnLoad(function() { // make the date text box var startDateTextBox = new dijit.form.DateTextBox({ value: new Date(2009, 7, 15) }, "startDate"); });
<link href="http://ajax.googleapis.com/ajax/libs/dojo/1.9.3/dojo/resources/dojo.css" rel="stylesheet" /> <link href="http://ajax.googleapis.com/ajax/libs/dojo/1.9.3/dijit/themes/claro/claro.css" rel="stylesheet" /> <script src="//ajax.googleapis.com/ajax/libs/dojo/1.9.3/dojo/dojo.js" djConfig="parseOnLoad:true"></script> <body class="claro"> <input id="startDate" name="startDate" dojoType="dijit.form.DateTextBox" required=true value="2009-08-15" />
solution2
0 2009-09-03 05:11:41
It looks like Dijit clears out the value when the DateTextBox applies itself to the input field. I am not sure why the value attribute would not be preserved when the dijit control is bound to the input. However, the DateTextBox has a value property in the API; you could try constructing it with this value in the constructor options programmatically instead of using the dojoType attribute. I think it would look something like:
dojo.addOnLoad(function(){
// make the date text box
var startDateTextBox = new dijit.form.DateTextBox({
value: "08/15/2009"
}, "startDate");
});
HTH
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.