Date Picker

As the name implies, the date picker component allows you to easily select a date. This component is represented by the Datepicker class, which is a direct descendant of the Basedatepicker class. Basedatepicker is an abstract class and is a subclass of Basecomponent.

The Basedatepicker class adds eleven attributes and the Datepicker class adds one. The attributes defined in the Basedatepicker class are listed in Table 11.3.

Both the Basedatepicker and Datepicker classes add new methods. Here are the methods defined in the Basedatepicker class.

focusOnDay(week, day)

Sets the focus on the specified day. The value of the week argument must be 0 to 5 (inclusive) and for the day argument 0 to 6 (inclusive).

focusOnFirstDayInMonth()

Sends a notification to the first day of the month that it has received focus.

focusOnLasDayInMonth()

Sends a notification to the last day of the month that it has received focus.

getNumberOfDaysInMonth(month, year)

Returns the number of days in the specified month and year.

handleKeyDown(key)

This method is invoked when a key goes down when the date picker has focus. The key is passed as the argument to this method.

handleKeyUp(key)

This method is invoked when a key goes up when the date picker has focus. The key is passed as the argument to this method.

isDayDisabled(week, day)

Specifies if the given day and week is selected.

isLastWeekInMonth(week)

Specifies if the tiven week is the last week in the month.

removeFocusFromDay(week, day)

Removes the focus from a day.

selectFocusDay()

Returns the day that has the focus.

setMonthToShow(month, year)

Sets the month to show in the date picker.

setStartingDay(day, max)

Sets the day number that the first day of the month should have, and all subsequent days.

showNextMonth()

Shows the next month.

showPreviousMonth()

Shows the previous month.

The Datepicker class overrides several methods in its parent class, but it does not add new methods.

For example, the code in Listing 11.2 allows the user to select a date and displays the selected date in a text tag.

Listing 11.2. Using the date picker

<canvas height="200">
    <script>
        var today = new Date();
        var lastYear = new Date(today.getFullYear() - 1,
                today.getMonth(), today.getDate());
        var nextYear = new Date(today.getFullYear() + 1,
                today.getMonth(), today.getDate());

    </script>
    <simplelayout axis="y" spacing="5"/>
    <datepicker earliestdate="$once{lastYear}"
        selecteddate="$once{today}"
        latestdate="$once{lastYear}">
        <method event="onselecteddate">
            if( this.selecteddate != null ) {
                display.year.setText(
                        this.selecteddate.getFullYear() );
                display.month.datapath.setXPath(
                "datepicker_strings_en:/months/month[@index='" +
                        this.selecteddate.getMonth() + "']/@full" );
                display.date.setText( this.selecteddate.getDate() );
            }
        </method>
    </datepicker>

    <view id="display">
        <text name="month" resize="true" datapath="."/>
        <text name="date" resize="true"/>
        <text name="year" resize="true"/>
        <simplelayout axis="x" spacing="2"/>
    </view>
</canvas>

To test the code, direct your browser to this link.

http://localhost:8080/lps-4.0.x/app11/datePickerTest1.lzx

Figure 11.4 shows the generated application.