A Nice Little Date Picker
At one point or another we've probably all had to get round the fact that Notes doesn't translate its handy little date pickers to the web. In the past I've used a variety of solutions ranging from Java applets to home-baked modal window approaches. Well, in my continuing quest to provide you with the useful things you all need, I have a nice little DHTML date-picker to demonstrate. As I mature I find my approach to using "fancy" widgets like this changes. Why not stick them in if they're needed? Even if they do require three JS files and one extra CSS resource! If the users are happy that's all that matter.
Let's look at an example. Click on the calendar icon next to the text box below to launch the picker:
Note: You may have noticed the page paused here as said files loaded...
Nice isn't it?! And that's only the trimmed-down "simple" version. You can get really carried away with it and even include a time picker. I've packaged the basic files you'll need in to this simple demo database (Domino 6).
If you want the full code and to see some more variations visit the developer's site. From what I can see it's shareware. Not sure if making a donation means you can remove the "?" icon that displays his personal contact details. Not what you want users of a large corporate system to see...
Did you notice the page pause as it loaded? Refresh and see if it does it again. In total there are 64KB of files required. Whether or not this is an acceptable burden on the page depends on your circumstance. The pause in this case was becuase I've included the files inline with the HTML. Much better is to place it in the header and then only when forms are in edit mode. Hopefully, with you cache settings correct, the effect will be negligible.
Not sure what the browser support for this is. If you find it doesn't work, let us know what you're using.
Skip to the 
You can subscribe to an individual
I've used this calendar before and our clients really liked its UI.
Jake, I tested this one a while back and the only problem we found was the double click to get a date. It was frustrating to our users.
We ended up going with SpiffyCal, another free calendar.
You can find it here: {Link}
Not as polished as the one you found, but it seems to work on everything except Opera.
Lance. Single click is an option. The default seems to be double though. No idea why! Notice the one above is single-click? Look at the source to see how. Something like:
cal.singleClick=true;
I used this one for a client, with a lot of success.
A lot of option, and very easy to integrate, either in popup or not.
As of the browser integration, IE and Firefox work very well.
Although i like the UI of your example better, this one has got nice month/year selectors ala notes.
{Link}
Maybe we should merge the two? ;)
"Mine" has month/date selectors too. Just not very obvious. Press down on the arrows to either side of where it says Today to see what I mean. Not obvious but works ok once you know it's there.
Hey, my birthday falls on a Friday in the year 2567. Looking forward to a great night out on the town then!
Like the calendar. Good work Jake.
I've been using this one for a while, and I like its configurability (including "language packs").
BTW, if you use computed text in the mini-config on your page, you can have Domino throw in a time-formatting string at run time to make sure that what the user selects matches your server settings regardless of who's been playing silly config games or which of your multiple international servers is being hit. Also useful for setting the language pack download based on user prefs.
Nice idea Stan. Hadn't thought of that. Something like this? {Link}
Regarding the field "ID" property:
"For the field this means we need to add "id=\"MyDate\"" to the HTML Attributes of the field!"
As a rule now on forms for each field I always make sure the name of the field is also in the id field on the HTML tab of the field's info-box. It saves a lot of time and avoids having to escape quotes on html attributes.
As a side effect the designer client will also not allow you to have more than 1 field with that id value, a handy sanity check given for free!
if you like this calendar but wonder how you could make it display some days in other colors check this
{Link}
This is a great tool that we're trying to add to our forms. But when we click our submit button (just doing FileSave and FileCloseWindow, also tried using the JS "submit()") the form does not get processed. We can take out the date picker and everything works ok. Any clues?
it works on local, but not on server! Any ideas! Please!
I just saw an article for a "pure Domino" popup calendar. While I am very fond of the Mishoo widget, I really like this all Domino solution by Daniel Koffler. The only problem with this solution is that it generates another hit on the web server, but only if someone actually needs to pop open the calendar. The article with the code can be found here: {Link}
I don't have domino and I would like to try out this code. How do I begin? I see the only download file here is .nsf file which is a database file. I'm confused?
Mark. Follow the link to the developer's site.
I am trying to convert this back to an R5 database format.
The .js and .css have all become pages and so on BUT the calendar.setup process does not work.
Has anyone done this conversion?
I think it may the calendar-setup.js is trying to do something that is not supported in R5?
any ideas would be appreciated.
thanks
Figured it out - reminds me of doing webdav with R4.5/6...
Contact directly if you need the details
i whode like to down lode this datepiker
very nice
Hi Jake, just wondering how to add .js files to domino databases. I have another calendar that i use, which also relies on some .gif files for the images and is in a folder. how do i basically include a whole fold in my domino databse. e.i. im also trying this so that i can include Dojo in my database. All iv'e managed to do up to now is include single .js files and one at a time, and the same goes for the image files.
problem selections if year is 2025 or 1900 or month jumping from Jan to Dec i.e too many clicks
Helen, you need to change a couple of ID tags. Change the ID and the button to something else and you should be all set.
I have my first field using ID = Cal1 (on the HTML tab of the properties box) and in the javascript code, button : "Cal1". My second field is Cal2 and the 3rd is Cal3. I actually have 6 total calendar fields on one form doing it this way.
Thank you so much for having this nice calendar pop-up available. I am developing a seminar/event registration site and this calendar picker is just what we need. It was easy to install, easy to change the date format, and easy to change the help message. Many thanks!
I have 2 dates on a form; start-date and end-date. How do I code so that if end-date is null, it defaults to start-date +1. I have tried numerous versions of the samples, and so far do not have this worked out. This has to have been done before. If you have this code, would you be so kind to share it. thanks.