You are browsing the archive for datetextbox.

Changing the default value of Dojo DateTextBox

July 1, 2012 in Dojo, JavaScript

In some business use cases, you may need to change the default value of the Dojo DateTextBox. For example, if you have a date of birth field and you wish to make the default date a date in the past in order to minimize the user navigation in the Dojo DateTextBox component.

In order to change the default value of Dojo DateTextBox, you need to change the value attribute of the dijit.form.DateTextBox as shown below.

...
<label for="sampleDate">Select the Date: </label>
<input id="sampleDate" dojoType="dijit.form.DateTextBox"></input>

...
<script type="text/javascript">
	dojo.addOnLoad(function (){
		dijit.byId('sampleDate').attr("value", new Date(1970, 1, 30)); 
	});
</script>
Profile photo of hazems

by hazems

Reading the Dojo DateTextBox in your custom format

November 27, 2011 in Dojo, JavaScript, Web 2.0

In Dojo 1.4, you can use the DateTextBox component for showing an input calendar for the user, as follows:

<label for="sampleDate">Select the Date: </label>
<input id="sampleDate" dojoType="dijit.form.DateTextBox"></input>
<button id="sampleButton" class="buttonClass" id="getDateValue" 
dojoType="dijit.form.Button" type="button" 
onclick="getDateValue();">Get Date Value</button>

However, getting the date value using the value property dijit.byId("sampleDate").value will result in a value like this:

Wed Nov 30 2011 00:00:00 GMT+0200

If you want to simply format the date object in the “yyyy-MM-dd” format (for example), you can use the dojo.date.locale.format as follows:

dojo.date.locale.format(dijit.byId("sampleDate").value, {datePattern: "yyyy-MM-dd", selector: "date"})

The complete getDateValue JavaScript function is as follows:

<script type="text/javascript">
function getDateValue() {
    alert("Default Date: " + dijit.byId("sampleDate").value);
    alert("Formatted Date: " + dojo.date.locale.format(dijit.byId("sampleDate").value, 
    {datePattern: "yyyy-MM-dd", selector: "date"}));
}
</script>

I wish that this tip can be useful to you.

Skip to toolbar