OBSOLETE?

DatePicker

This widget is very useful for supplying the ability to pick dates. This example demonstrates how to build this widget "on the fly" that will float next to the href element invoking it, and then close itself when a user has selected a date.

Create the link

First we need to create a link that will start all of our javascript magic.

<form>
<input type="text" id="inputField" size="32" />
<a id="linkId">Pick Date</a>
</form>

Define javascript functions

We need two different functions, one for showing(and building if necessary) the DatePicker, and one to set the inputField's value to the seleted date.

The first function we'll build will show the DatePicker widget. If the widget doesn't already exist in the document, then it will build it on the fly (appropriately positionig it next to our input field) and connect the right events.

function showDatePicker() {

        var block = document.getElementById("testPicker");

        var picker;

	if (!block) {

	    var body = dojo.html.body();

	    block = document.createElement("div");

	    block.setAttribute("id", "testPicker");

	    block.style.display = "none";

	    block.style.position = "absolute";

	    block.style.zIndex = "400";

	    block.style.background = "Window";

	    block.style.backgroundColor = "white";

	    block.style.border = "1px solid #efefef";

	    var inputField = document.getElementById("inputField");

        var offsets = cumulativeOffset(inputField);

        block.style.top    = offsets[1] + 15 + 'px';

        block.style.left   = offsets[0] + 'px';

        body.appendChild(block); 	

	picker = dojo.widget.fromScript("DatePicker",

                {widgetId: "testPickerPicker"}, block, "last");

        dojo.event.kwConnect({srcObj: picker,srcFunc:"onSetDate",targetObj: this, targetFunc:"setDateField", once:true});

	}

    dojo.fx.html.fadeShow(block, 200);

    }

    function cumulativeOffset(element) {

    var valueT = 0, valueL = 0;

    do {

      valueT += element.offsetTop  || 0;

      valueL += element.offsetLeft || 0;

      element = element.offsetParent;

    } while (element);

    return [valueL, valueT];

    }

Now we will build the second function, referenced already above, called "setDateField". This will simply grab the selected date of our widget and set the input fields value to it.

function setDateField(evt) {

        document.getElementById("testPicker").style.display="none";

        var field = document.getElementById("inputField");

        var date = dojo.widget.manager.getWidgetById("testPickerPicker").date;

        field.value = date.toString();

    }

Conclusion

This example is a little lacking on documentation right now, but it's working code that I'm using, so at least it will serve the purpose of having more example code to reference.