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?

My HTML:

<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>

Answer 1

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

Answer 2

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

<input id="startDate" name="startDate" dojoType="dijit.form.DateTextBox" required=true value="2009-08-15"/>

When setting a date attribute from JavaScript, you should use a Date object:

dojo.addOnLoad(function(){
    // make the date text box
        var startDateTextBox = new dijit.form.DateTextBox({
             value: new Date(2009, 7, 15)
        }, "startDate");
});