An alternative Date Picker for LiveCycle Designer forms

Problem

The standard date/time field that is supplied with Designer is fairly simple with no options to control its behaviour. There is no way to force the use of the date picker, they can always enter a date with the keyboard. There is no way to specify a default date, so if you are after the date of birth you have to click the previous month button so often it becomes unusable. There is no way to programmatically open the date picker. And, there is no way to set min and max dates.

Solution

This alternative has some serious limitations as well as it really just a normal subform I position against a standard text field. To do this the text field has to be within a subform that uses positioned layout so I can calculate the x andy coordinates.

Detailed explanation

I have added some options to control the color and format of the date picker but because this is just a standard subform you can modify it to suit your needs. For example I have also added previous and next year buttons.

The options can be set in the initialise event of the text field, for example, to set the date format, tool tip format and the min and max values (XFAUtil is my helper script object to add values to a fields <desc> element);

XFAUtil.setProperty(this, DatePicker.Controller.Properties.ToolTipFormat.Name, "date.long{}", XFAUtil.ContentType.Text);
XFAUtil.setProperty(this, DatePicker.Controller.Properties.DateFormat.Name, "date.long{}", XFAUtil.ContentType.Text);
XFAUtil.setProperty(this, DatePicker.Controller.Properties.MinValue.Name, new Date(new Date().getFullYear(),0,1), XFAUtil.ContentType.Text);
XFAUtil.setProperty(this, DatePicker.Controller.Properties.MaxValue.Name, new Date(new Date().getFullYear(),11,31), XFAUtil.ContentType.Text);

Then when the text field receives focus, (in the enter event) show the date picker.

DatePicker.Controller.show(this);

And to stop a date being enter via the keyboard, in the change event;

xfa.event.change = "";

The code in the actual date picker is reasonably well commented (at least for me) so I wont discribe it here.

JavaScript Date Handling

There are a number of functions within FormCalc that make converting dates very easy. For example to convert the string "4 Janvier, 2011" to a date we can use the FormCalc function parse("date(fr){EEEE, D MMMM YYYY}", "4 Janvier, 2011").

To do this in JavaScript I use a hidden Date/Time field and the formattedValue, which I would normally use to retrieve a value but we can also assign a value to it;

Download sample Calendar.pdf, or all the .XDP files, Calendar.zip.