Calendar Picker Builder

 

 

In this topic ...

How do I...

Specifying Inputs

Use the Calendar Picker Builder to place a JavaScript popup calendar widget on a page. This widget is commonly used to select a date value as an input on a form. The Calendar Picker will generate the calendar widget and locate it on a named tag on the page.

This Builder will insert a button (either a text button or Image button) and a text input on a page. Clicking the button will pop up a calendar, and when a date is selected in the calendar it will be put into the text input.

We can place two Calendar Picker Builders on the same page to enable a user to select a range of dates. This is useful when you want to retrieve data over a varying lengths of time such as days, weeks, months, etc.

The Calendar Picker Builder can format the selected date using a restricted set of the standard Java Date formats. The allowable characters are 'y', 'M', and 'd. Any other character is considered a date separator.

 

How do I...

 

Place a popup calendar widget on a page?

Place a Calendar Picker Builder in the model in which you want to collect date information. To use a popup calendar locate the Builder on a named tag on the page. Then provide a text label for the button that represents the calendar widget, and choose a date format and calendar theme.

The Calendar Picker will output date information in the format you select.

To pre-populate the date input field, enter an initial date value in the Initial Value field. Note that the date value you enter must be in the format specified in the Date Format field above.

 

Specifying Inputs

This Builder takes the inputs described in the table below. For help on inputs common to many or all Builders such as those in the Properties input group, see "Using the Builder Call Editor"

Input Name Description
Name Enter a name for this Builder call. The Designer displays this name in the Builder Call List.
Page Location Use the Page Location input to specify the page or pages on which this Builder call will act.

See "Locating Control Builders on Pages" for detailed documentation about the Page Location input and page location syntax.

Popup Calendar
Button Type The button representing the calendar on the can be one of the following types:

  • Text - A standard text-based button

  • Image - An image used to represent the button

Button Image Available when Button Type above is "Image."

Enter the path to the image file used to represent the Button.

Example: my_button_image.jpg

Button Hover Image Optional .Available when Button Type above is "Image."

Enter path to image displayed during mouse-over.

Button Pressed Image Optional. Available when Button Type above is "Image."

Enter path to image displayed when button is pressed.

Button Label Available when Button Type above is "Text."

Provide text for the button label that will represent the popup calendar in the page.

Example: Start Date

Date Format Use this input to select a date format from the list of formats. If a format is not selected the default short format will be used for the current users locale.

The format you choose will be entered into the date field supported by this calendar picker.

The Calendar Picker Builder can format the selected date using a restricted set of the standard Java Date formats. The only allowable characters are 'y', 'M', and 'd', and any other characters are considered date separators.

Examples: MM/dd/yy   M/d/yy dd/MM/yyyy

Localization

Localized Resource

Use this input to specify an existing localized resource in the model to use with this Builder.

This resource will be used to localize text displayed on the calendar picker.

The following keys must be defined (sample text provided)

CANCEL=Cancel

CLOSE=Close

DAY_NAMES=Sun|Mon|Tue|Wed|Thu|Fri|Sat

Note that In some locales, you might want to display the first day of the week as a day other than Sunday. We can do so by using a date index. The Builder uses the index number as the zero-based index of the first day to display. For example, the folowing string resilts in Monday being displated as the first day of a week: 1|Sun|Mon|Tue|Wed|Thu|Fri|Sat

MONTH_NAMES=January|February|March|April|May|June|July|August|September|

October|November|December

NEXT_MONTH=Next Month

OK=Ok

PREVIOUS_MONTH=Previous Month

HTML Attributes
Size Determines the width of the text input in characters. The user may enter more characters than displayed.

For example, a Size value of "10" sets the size of the text input control to ten characters wide. If a user enters a greater number of characters than 10, the text input control displays the last ten characters entered.

Length Determines the largest amount of characters accepted for the text input. Additional characters entered into the text input are ignored.

For example, a Max Length value of "5" could be used for a text input that prompts the user to enter their five digit zip code.

Advanced
Initial Value Specify an initial date value for the calendar widget.

We can either enter a date value directly or specify a reference to a WebApp object that contains the initial date value.

Note that The format of the value you specify here should be the same format specified in the Date Format input above.

Calendar Style Sheet This input allows you to specify an alternate style sheet to apply to the Calendar Picker. The style sheet supplied must contain the required class names.

For more information refer to the default style sheet located in: factory\clientjavascript\wclCalendar\css\WclBaseSkinCSS.css