CODEWITHSUNDEEP
javascripthtmldojo
NealWalters
NealWalters

Reputation: 18197

Dojo/Dijit - DateTextBox hides my initial value

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>

Upvotes: 1

Views: 5057

Answers (2)

Adam
Adam

Reputation:

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

Upvotes: 3

RMorrisey
RMorrisey

Reputation: 7739

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

Upvotes: 0

Related Questions