Programatically Create DateTextBox

Submitted by sudheer on Wed, 06/16/2010 - 15:45

How to create dijit.form.DateTextBox widget programmatically

There are two ways to create Dojo's widgets

Declarative
Programmatic

It is often a matter of project preference and personal opinion to decide which approach to take. Many developers are against mixing up markup and JavaScript.

Programmatically creating widgets has its advantages. For instance, you may want to create a date picker when a button is clicked.

In a previous article we discussed how to add a Dojo date picker declaratively. We also showed how to add Dojo date picker without writing a singe line of JavaScript using the Zend Framework.

Let's create a dijit.form.DateTextBox widget programmatically step by step.

Step 1: Include the Dojo and Tundra theme CSS files. In this example we use Dojo from the Google CDN. You don't have to download any JavaScript files.

<html>
<head>
<style type="text/css">
        @import "http://ajax.googleapis.com/ajax/libs/dojo/1.4/dojo/resources/dojo.css";
        @import "http://ajax.googleapis.com/ajax/libs/dojo/1.4/dijit/themes/tundra/tundra.css";
</style>

Step 2: Include the main dojo.js file

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.4/dojo/dojo.xd.js"
    djConfig="parseOnLoad: true">
</script>

Step 3: Write a function to create the widget when the DOM is loaded.

<script type="text/javascript">
    dojo.require("dijit.form.DateTextBox");
    dojo.addOnLoad(function() {
        var myDate = new dijit.form.DateTextBox(
            {
                id: "myDate",
                name: "myDate",
            }, "myDate"
        );
    })
</script>
</head>

Before writing the function we make sure dijit.form.DateTextBox is included using the dojo.require() statement. When the DOM loads our function is called. Within our function, we create an instance of the dijit.form.DateTextBox object. We specify the id and name of the widget. We also specify, the DOM node of the widget - "myDate".

Step 4: Write the body and input element markup

<body class="tundra">
 
    <input id="myDate">
 
    <p>The tutorial is available at <a href="http://techchorus.net/programatically-create-datetextbox">TechChorus</a>
    </p>
 
</body>
 
</html>

In four easy steps we created DateTextBox widget programmatically. Take a look at the demo page. The source code is available at code.google.com Mercurial repository.

Bookmark/Search this post with

About the author

Sudheer is an entrepreneur and software developer. Get more from Sudheer on Twitter.

hello

Submitted by Guest (not verified) on Fri, 02/04/2011 - 00:26.

The text in the calendar month is hard to read. Can the month name color be changed at the top of the calendar?

You have two options Use a

Submitted by sudheer on Fri, 02/04/2011 - 01:13.

You have two options

Use a different dijit theme
Override style using your custom CSS

How to create form without html?

Submitted by axe (not verified) on Fri, 11/18/2011 - 00:48.

I trying such method:
-------------
var tp = new dijit.form.Form({});
dojo.place(tp.domNode, content);
var tp1 = new dijit.form.TextBox({});
dojo.place(tp1.domNode, tp.domNode);
-------------
but I can't create label to control tp1. How to do it?

Tech Chorus

+1

Tech Chorus feeds

Subscribe By Email

Navigation

User login

Popular content

All time:

Recent comments