Faheem Abbas » Creating dojo datepicker with dojo script

Creating dojo datepicker with dojo script

Posted by faheem on July 31, 2009

Creating dojo datepicker with dojo scriptEdit | Delete
by fahimabas on August 26, 2009
Dojo date picker is nice and beautiful widget. The nice thing about any dojo widgets is that they can be easily attached to appropriate html tag. To assign date picker to input box take the following cod.

require('dijit.form.DateTextBox');

If you correctly include dojo.js and tundra.css, you will see a nice calendar attached to your input field.

The same can be achieved writing javascript code for it.
Lets assume you have an input box like the following.

Here we are using onclick even to show our calendar. Place the following code in your showCalendar() method.

In the script above we first create our calendar/datepicker widget. Then call dijit.popup.open() method that connect our datepicker widget to the input box. Note that in the around: ‘datepicker’, “datepicker” is the id of our input box.
Next we connect “onValueSelected” to our calendar. When value is selected, it will be assigned to the input box. Another important thing here is date formatting before assigning it to our input field.
Line

dojo.date.locale.format(cal.value, {selector: "date", formatLength: "long"});

format date for us.
That’s it. If you have any issue, you can ask freely.

2 Responses to "Creating dojo datepicker with dojo script"

Anonymous says:

August 3, 2009 at 9:50 pm

Thanks for the example. I was looking for something simple like this. I have a question though; usually dojo widgets hide when Escape is pressed – how do I do that here?
Faheem Abbas says:

August 4, 2009 at 2:59 pm

This depends. you will need to call function on onblur event on the field on which you displaying date picker. and in that function call
dojo.popop.close(cal);
You will need to define
var cal = new dijit._Calendar;
globally. so that both function access cal.

Creating dojo datepicker with dojo script

2 Responses to "Creating dojo datepicker with dojo script"

Leave a Reply

General Sidebar