|
I've been meaning to write this article for
a long time now. So here it is - a DHTML date
picker for Domino. I'm afraid its not as detailed
as some of my previous DHTML series articles
but i'm sure its enough for you to be able to
take the code etc and insert it into your Domino
Applications.
You can download the
sample database here.
If you use the url: http://server/path/dhtmlcal.nsf/caldemo.htm?OpenForm
you will be able to see the demonstration working.
There are very few parts to this example the
main part is the single Notes Form DHTML_CALENDAR
which contains the bits that you need to copy
into your own applications. There is also a
page which has been set to "Treat Page
Contents as HTML" called calendar.js
which will also require copying into your Notes
database. Thats it really - nice and simple.
You can download the
sample database here.
As mentioned above, this form contains the
bits that you need to copy onto your form in
order to have the date picker functionality.
To start with we need to link the calendar.js
file as this contains all the javascript code
to operate the calendar. In this example I have
therefore placed the following Notes Formula
in the HTML Head Content Section.
Next there is the javascript onload event which
contains the following:
D=document.all
initDXCal()
This demo is for Internet Explorer only - but
I will find time one day to go through everything
and make them mozilla/netscape compatible as
well. Anyway D is set to document.all (to save
repetitive typing and to keep code size down).
initDXCal() is a
function inside the calendar.js
file which initiates the calendar object.
At the top of the form I have the following
pass-thru HTML:
<span id="dsp4"></span>
<span id=imagepath style="display:none"><Computed
Value></span>
The span with id dsp4
is used by the calendar api to pass dynamically
created html to your web page. The id dsp4
looks strange whilst i'm typing this, take no
notice of it - bits of this demo have been cut
from a DXFramework database.
The span with id imagepath
is also used by the api, in order to determine
the path for the images that the calendar component
uses. The Computed Value field has the same
Notes Formula that you can see above in the
HTML Head Content section.
Once you have the above all setup you are nearly
there. I have created a simple table in my Notes
Form and inserted a Notes Date Field - entitled
'date'. To the column to the right I have inserted
the following pass-thru HTML:
<img onmouseover="this.style.cursor='hand'"
onmouseout="this.style.cursor='default'"
alt='Select Date' src='/icons/vwicn063.gif'
onclick="dxcal(this,document.getElementById('date'),'dd/mm/yyyy')">
You will see that this is an image tag, and
I have used the calendar icon which is alreay
stored on the Domino Server. The important part
of this html is the onclick event.
The onclick event calls the dxcal() function
inside the calendar api and passes the button
as an object (using 'this'), the field object
that you wish to populate when the user clicks
on the date picker, and finally the format of
date you wish to use.
Being able to specify the date format is important.
I live in the UK and we specify dates 'properly'
ie: 27/11/2002 (27th day of the 11th month of
the 2002nd year) - obviously if you live in
the US or any other country that have dates
differently then you have to change the format
around to say 'mm/dd/yyyy'.
Thats all there is to this one - hope it comes
in handy in your domino web applications.
|
