Search This Blog

Friday, 13 April 2018

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.

5 comments:

  1. This comment has been removed by a blog administrator.

    ReplyDelete
  2. Hi.
    At first I want to thank you for your interesting website and posts about the Abobe livecycle.
    I am new to creating form and javascript. I try to search and look for the problems I have been faced in my work.

    One of the problem which takes log time from me is:
    I want to customize the pattern of the date picker in adobe live cycle.
    for example the user first select the format of the date (102=CCYYMMDD
    610=CCYYMM
    602=CCYY)

    from dropdown list and then the date field customized based on selected dropdown list items.
    So, I think I need some how to access the pattern( display, validate, data, ...) of the date field. Based on my search no where mentioned pattern access through javaScript.
    Would you please show some tips for that?

    ReplyDelete
  3. Hi Ram,

    You can reference the patterns in JavaScript using the samples below;

    Display Format DateField1.format.picture.value
    Edit Format DateField1.ui.picture.value
    Validate Format DateField1.validate.picture.value
    Data Format DateField1.bind.picture.value

    If you look at the XML Source you can work out the pattern required to reference any field property, just add ".value" if it's an element, attributes don't need it.

    Bruce

    ReplyDelete
  4. Thank you so much ... very useful indeed. Just wondering about the script under "XFAUtil.xfa" I could not find it. Appreciate it if you could provide the link to download it. Thanks.

    ReplyDelete
  5. Hi Tarek,

    Thanks for pointing this out and sorry for missing that file in the first place. I have added a link to the XDP files above, or use https://sites.google.com/site/livecycledesignercookbooks/Calendar.zip?attredirects=0&d=1

    Bruce

    ReplyDelete