Adding a dojo calendar control to traditional Notes date fields

When web enabling old Domino forms date fields has never been fun. users setting the wrong format, and the save breaks the form giving a error 500. There has been alot of dhtml calendar pickers that has been used some better and some worse of handling other browses than IE.  We all have these applications that is  very large and that you don’t can convert directly to XPages, then adding dojo to your old forms can help you.

 What do you need to do to get a dojo calendar control to work with a old date field in a form, not much actually. Dojo is really good of helping you to do this move.

First you have to decide if you want to host the dojo toolkit locally or thru i.e Google CDN.

It’s just the url:s in my example that you need to change if you want to host the dojo files in the html directory on your Domino server.

Add the following with passthru html to a subform

<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.8.1/dojo/dojo.js"
djConfig="parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require("dijit.form.DateTextBox");
</script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.8/dijit/themes/tundra/tundra.css"/>

Update:
In 8.5.3 you could use this internal url to dojo instead of the CDN
/xsp/.ibmxspres/dojoroot-1.6.1/dojo/dojo.js 

When this is done you need to add this subform to your form.

You also need to add the theme class to the body attribute section of the form. 

“class=\”tundra\”

 

On your date fields on the form add the following to the HTML attributes to the field

“dojoType=\”dijit.form.DateTextBox\” ” 

And your done, add the last row to all your date fields to get a calendar control in all of them.

This calendar control will use browser locale when deciding how the date should be displayed.

Or you can like I like to do set a pattern that matches the date format on the server by changing the dojo type we specified on the field to

“dojoType=\”dijit.form.DateTextBox\” constraints={datePattern:’yy-MM-dd’}”

The Dojo series will continue with more controls both in traditional Notes and in XPages.

Enjoy

  1. I thought that Dojo came with Domino (as of 8.5)? You mean I have to either use a CDN or download it to my HTML directory anyway? Or do you mean using pre-8.5 versions of Domino?

    Also, I think a part in the beginning was lost, it just says “Add the following with passthru html to a subform” and then nothing more.

  2. 😀 nice tip 😉 Thanks

  3. Fredrik isn’t the dojo part of 8.5.3 ? extlib ?
    Would this work without having the dojo toolkit locally or thru i.e Google CDN ?

  4. Yes, Dojo is a part of the Domino server. You could probably use Dojo the interal Dojo. As of 8.5.3 Dojo is an a plugin so I’m not sure that the url is valid in all cases. But you could probably use
    /xsp/.ibmxspres/dojoroot-1.6.1/dojo/dojo.js
    instead of
    http://ajax.googleapis.com/ajax/libs/dojo/1.8.1/dojo/dojo.js

  5. So there is not really any difference between using jQuery or using Dojo in a Domino-based web application, both are called from a CDN…

    Joacim Boive said “I cringe every time I see someone importing yet another framework when there’s already one available”, but in reality you need to import Dojo froma DCN as well, so really not any different.
    Except that you can find much more help/info on jQuery on say StackOverflow…

  6. I see what is called the internal path for Dojo:
    “/xsp/.ibmxspres/dojoroot-1.6.1/dojo/dojo.js”

    .. but cannot find that path or the source of the dojo.js anywhere on the server.

    In firebug I see the dojo object and the dojox & dijit objects in the stack as empty, while dojo is not empty.

    Is there a separate internal path for dijit & dojoz?

    • The path is the same as you would have in an ordinary Dojo installation. Except you will never find the files on the server.
      because the dojo installation is an OSGI plugin.

      /xsp/.ibmxspres/dojoroot-1.6.1/dojox

      /xsp/.ibmxspres/dojoroot-1.6.1/dijit

Leave a Comment


NOTE - You can use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

This site uses Akismet to reduce spam. Learn how your comment data is processed.