basedatepicker

basedatepicker
Prev	Base Components	Next

Description

Basedatepicker is an abstract class from which you can build a fully functional month-based datepicker from. When creating an implementation of the basedatepicker, it is expected that certain methods from basedatepicker, basedatepickerday and basedatepickerweek will be overridden to provide full functionality of a datepicker. For datepicker, these methods include doSpaceUp(), doEnterUp(), and optionally setMonthToShow(). See the source code of datepicker for a more extensive example. See also basedatepickerday and basedatepickerweek

            <canvas height="200"> 
                <class name="myday" 
                       extends="basedatepickerday" 
                       bgcolor="green"
                       width="20"
                       height="20">
                    <handler name="onclick"> 
                    <![CDATA[
                        if( !this.disabled  ) {
                            this.setAttribute('selected', true);    
                        } 
                    ]]>
                    </handler>
            
                    <text text="${parent.daynum}"
                          visible="${!parent.disabled}" 
                          opacity="${parent.selectable ? 1 : .3 }"/>       
                </class>
            
                <class name="myweek" extends="basedatepickerweek">
                    <simplelayout axis="x" spacing="1"/> 
                </class> 
                
                <class name="mydatepicker" 
                       extends="basedatepicker" 
                       weekclass="myweek"
                       dayclass="myday"
                       xinset="0"
                       yinset="0">
            
                    <method name="setMonthToShow" args="month, year">
                        super.setMonthToShow(month,year);
                        this.display.month.datapath.setXPath(
                        "datepicker_strings_en:/months/month[@index='" + month + "']/@full" );
                        this.display.year.setText( year );
                    </method>
            
                    <handler name="onselecteddate">
                        if( this.selecteddate != null ) {
                            this.selected.year.setText( this.selecteddate.getFullYear() );
                            this.selected.month.datapath.setXPath(
                                    "datepicker_strings_en:/months/month[@index='" + 
                                    this.selecteddate.getMonth() + "']/@full" ); 
                            this.selected.date.setText( this.selecteddate.getDate() );
                        }
                    </handler>
            
                    <view options="ignorelayout">
                        <text width="20" height="20" bgcolor="red" text="S"/>
                        <text width="20" height="20" bgcolor="red" text="M"/>
                        <text width="20" height="20" bgcolor="red" text="T"/>
                        <text width="20" height="20" bgcolor="red" text="W"/>
                        <text width="20" height="20" bgcolor="red" text="T"/>
                        <text width="20" height="20" bgcolor="red" text="F"/>
                        <text width="20" height="20" bgcolor="red" text="S"/>
                        <simplelayout axis="x" spacing="1"/>
                    </view> 
                    <view> 
                        <button text="previous" onclick="classroot.showPreviousMonth()"/>
                        <button text="next" onclick="classroot.showNextMonth()"/>
                        <simplelayout axis="x"/>
                    </view>
                    <view name="display">
                        <text> Showing: </text>
                        <text name="month" datapath="." resize="true"/>
                        <text name="year" resize="true"/>
                        <simplelayout axis="x" spacing="2"/>
                    </view>
                    <view name="selected">
                        <text> Selected: </text>
                        <text name="month" datapath="." resize="true"/>
                        <text name="date" resize="true"/>
                        <text name="year" resize="true"/>
                        <simplelayout axis="x" spacing="2"/>
                    </view> 
            
                    <simplelayout axis="y" placement="content" spacing="1" inset="20"/> 
                    <simplelayout axis="y"/>
                </class> 
                <mydatepicker/> 
            </canvas>

Abstract class for the datepicker. The basedatepicker class shows the days of the week in a typical month based layout. Extend this class to create a full featured UI of a datepicker, or just use the datepicker component.

Superclass Chain

node (LzNode) » view (LzView) » basecomponent » basedatepicker

Known Subclasses

Known Direct Subclasses: datepicker

Details

Properties (11)

dayclass: <attribute name="dayclass" />

protected var dayclass;

The dayclass to use for this basedatepicker
earliestdate: <attribute name="earliestdate" value="null" />

public var earliestdate;

The earliest date that is selectable.
latestdate: <attribute name="latestdate" value="null" />

public var latestdate;

The latest date that is selectable.
selecteddate: <attribute name="selecteddate" value="null" />

public var selecteddate;

The Date that is currently selected.
selecteddatepickerday: <attribute name="selecteddatepickerday" value="null" />

protected var selecteddatepickerday;

The datepickerday which has been selected.
showingdate: <attribute name="showingdate" type="expression" value="null" />

public var showingdate : Object;

A Date object which represents the month to be shown.
showingmonth: <attribute name="showingmonth" type="number" value="null" />

protected var showingmonth : Number;

The month that is currently showing in the datepicker.
showingyear: <attribute name="showingyear" type="number" value="null" />

protected var showingyear : Number;

The year that is currently showing in the datepicker.
weekclass: <attribute name="weekclass" />

protected var weekclass;

The weekclass to use for this basedatepicker
xinset: <attribute name="xinset" type="number" value="null" />

protected var xinset : Number;

The number if pixels from this.x to show the datepicker days
yinset: <attribute name="yinset" type="number" value="null" />

protected var yinset : Number;

The number if pixels from this.y to show the datepicker days

Methods (16)

focusOnDay(): <method name="focusOnDay" args="week, day" />

protected function focusOnDay(week, day);

Set the focus on the given day
focusOnFirstDayInMonth(): <method name="focusOnFirstDayInMonth" />

protected function focusOnFirstDayInMonth();

Notify the first day of the month that it has recieved focus.
focusOnLastDayInMonth(): <method name="focusOnLastDayInMonth" />

protected function focusOnLastDayInMonth();

Notify the last day of the month that it has recieved focus.
getNumberOfDaysInMonth(): <method name="getNumberOfDaysInMonth" args="month, year" />

protected function getNumberOfDaysInMonth(month, year);

Returns the number of days in a given month.
handleKeyDown(): <method name="handleKeyDown" args="k" />

public function handleKeyDown(k);

This method is called when a key goes down from the basedatepicker
handleKeyUp(): <method name="handleKeyUp" args="k" />

public function handleKeyUp(k);

This method is called when a key goes up from the basedatepicker
init(): <method name="init" />

public function init();
isDayDisabled(): <method name="isDayDisabled" args="week, day" />

protected function isDayDisabled(week, day) : boolean;

Finds out if a given day for a given week is selected.
isLastWeekInMonth(): <method name="isLastWeekInMonth" args="w" />

protected function isLastWeekInMonth(w);

Determines if the given week is the last week in the month
removeFocusFromDay(): <method name="removeFocusFromDay" args="week, day" />

protected function removeFocusFromDay(week, day);

Remove the focus from a day
selectFocusDay(): <method name="selectFocusDay" />

protected function selectFocusDay();

Select the day that has focus
setMonthToShow(): <method name="setMonthToShow" args="newMonth, newYear" />

protected function setMonthToShow(newMonth, newYear);

Set the month to show in the basedatepicker.
setSelecteddatepickerday(): <method name="setSelecteddatepickerday" args="d" />

protected function setSelecteddatepickerday(d);

Sets the currently selected basedatepickerday. If a previous basedatepickerday was selected, it is unselected, and told to become unselected
setStartingDay(): <method name="setStartingDay" args="d, max" />

protected function setStartingDay(d, max);

Sets day number that the first day of the month should have, and all subsequent days. Days that are less than 1 or are larger than max will not be selectable or shown. This method assumes that this.showingmonth and this.showingyear are current.
showNextMonth(): <method name="showNextMonth" />

public function showNextMonth();

Show the next month in the datepicker
showPreviousMonth(): <method name="showPreviousMonth" />

public function showPreviousMonth();

Show the previous month in the datepicker

LZX Synopsis

</class>

JavaScript Synopsis

public basedatepicker extends basecomponent {

protected var dayclass ;

public var earliestdate ;

public var latestdate ;

public var selecteddate ;

protected var selecteddatepickerday ;

public var showingdate : Object;

protected var showingmonth : Number;

protected var showingyear : Number;

protected var weekclass ;

protected var xinset : Number;

protected var yinset : Number;

prototype protected function focusOnDay (week, day);

prototype protected function focusOnFirstDayInMonth ();

prototype protected function focusOnLastDayInMonth ();

prototype protected function getNumberOfDaysInMonth (month, year);

prototype public function handleKeyDown (k);

prototype public function handleKeyUp (k);

prototype public function init ();

prototype protected function isDayDisabled (week, day) : boolean;

prototype protected function isLastWeekInMonth (w);

prototype protected function removeFocusFromDay (week, day);

prototype protected function selectFocusDay ();

prototype protected function setMonthToShow (newMonth, newYear);

prototype protected function setSelecteddatepickerday (d);

prototype protected function setStartingDay (d, max);

prototype public function showNextMonth ();

prototype public function showPreviousMonth ();

}

Name

Synopsis