<basedatepicker>
Prev  Base Components  Next

<basedatepicker>
An abstract date picker.

JavaScript: lz.basedatepicker
extends <basecomponent> » <view> » <node> » lz.Eventable »

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"> 
                    
                        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="lz.myweek" dayclass="lz.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.setAttribute('text', year );
                    </method>
            
                    <handler name="onselecteddate">
                        if( this.selecteddate != null ) {
                            this.selected.year.setAttribute('text', this.selecteddate.getFullYear() );
                            this.selected.month.datapath.setXPath(
                                    "datepicker_strings_en:/months/month[@index='" + 
                                    this.selecteddate.getMonth() + "']/@full" ); 
                            this.selected.date.setAttribute('text', 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>
edit
Flash
edit
HTML5
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.

Attributes

Name (CSS property) Type (tag) Type (js) Default Category
dayclass expression any   read/write
  The dayclass to use for this basedatepicker
earliestdate expression any null read/write
  The earliest date that is selectable.
latestdate expression any null read/write
  The latest date that is selectable.
selecteddate expression any null read/write
  The Date that is currently selected.
selecteddatepickerday expression any null read/write
  The datepickerday which has been selected.
showingdate expression any null read/write
  A Date object which represents the month to be shown.
showingmonth number Number null read/write
  The month that is currently showing in the datepicker.
showingyear number Number null read/write
  The year that is currently showing in the datepicker.
weekclass expression any   read/write
  The weekclass to use for this basedatepicker
xinset number Number null read/write
  The number if pixels from this.x to show the datepicker days
yinset number Number null read/write
  The number if pixels from this.y to show the datepicker days

Attributes inherited from <basecomponent>

doesenter, enabled, hasdefault, isdefault, style, styleable, text

Attributes inherited from <view>

aaactive, aadescription, aaname, aasilent, aatabindex, align, backgroundrepeat, bgcolor, cachebitmap, capabilities, clickable, clickregion, clip, colortransform, context, contextmenu, cornerradius, cursor, fgcolor, focusable, focustrap, font, fontsize, fontstyle, frame, framesloadratio, hasdirectionallayout, hassetheight, hassetwidth, height, layout, loadratio, mask, opacity, pixellock, playing, proxyurl, resource, resourceheight, resourcewidth, rotation, shadowangle, shadowblurradius, shadowcolor, shadowdistance, showhandcursor, source, stretches, subviews, tintcolor, totalframes, unstretchedheight, unstretchedwidth, usegetbounds, valign, visibility, visible, width, x, xoffset, xscale, y, yoffset, yscale

Attributes inherited from <node>

classroot, cloneManager, data, datapath, defaultplacement, id, ignoreplacement, immediateparent, inited, initstage, name, nodeLevel, options, parent, placement, styleclass, subnodes, transition

Methods

focusOnDay()
basedatepicker.focusOnDay(week, day);
Set the focus on the given day
Parameter Name Type Description
week   The week that contains the day to set focus to. Valid values are 0-5
day   The day in the given week to set foocus to. Valid values are 0-6
focusOnFirstDayInMonth()
basedatepicker.focusOnFirstDayInMonth();
Notify the first day of the month that it has recieved focus.
focusOnLastDayInMonth()
basedatepicker.focusOnLastDayInMonth();
Notify the last day of the month that it has recieved focus.
getNumberOfDaysInMonth()
basedatepicker.getNumberOfDaysInMonth(month, year);
Returns the number of days in a given month.
Parameter Name Type Description
month   The month that you want to get the number of days for.
year   The year of the month that you want to get the number of days for.
handleKeyDown()
basedatepicker.handleKeyDown(k);
This method is called when a key goes down from the basedatepicker
Parameter Name Type Description
k   The key that went down
handleKeyUp()
basedatepicker.handleKeyUp(k);
This method is called when a key goes up from the basedatepicker
Parameter Name Type Description
k   The key that went up
init()
basedatepicker.init();
isDayDisabled()
basedatepicker.isDayDisabled(week, day);
Finds out if a given day for a given week is selected.
Parameter Name Type Description
week   The week in the month that contains the day to check. Valid values are 0-5
day   The day in the given week to check. Valid values are 0-6
Returns Type Description
  boolean true if the given day is disabled, else false
isLastWeekInMonth()
basedatepicker.isLastWeekInMonth(w);
Determines if the given week is the last week in the month
Parameter Name Type Description
w   The week to check
removeFocusFromDay()
basedatepicker.removeFocusFromDay(week, day);
Remove the focus from a day
Parameter Name Type Description
week   The week that contains the day to remove focus from. Valid values are 0-5
day   The day in the given week to remove foocus from. Valid values are 0-6
selectFocusDay()
basedatepicker.selectFocusDay();
Select the day that has focus
setMonthToShow()
basedatepicker.setMonthToShow(newMonth, newYear);
Set the month to show in the basedatepicker.
Parameter Name Type Description
newMonth   The month of the year to show
newYear   The year of the month to show
setSelecteddatepickerday()
basedatepicker.setSelecteddatepickerday(d);
Sets the currently selected basedatepickerday. If a previous basedatepickerday was selected, it is unselected, and told to become unselected
Parameter Name Type Description
d    
setStartingDay()
basedatepicker.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.
Parameter Name Type Description
d   The day of the month to start with. Negative numbers are ok.
max   The max number of day to show. This is the number of days in the current month.
showNextMonth()
basedatepicker.showNextMonth();
Show the next month in the datepicker
showPreviousMonth()
basedatepicker.showPreviousMonth();
Show the previous month in the datepicker

Methods inherited from <basecomponent>

acceptValue, doEnterDown, doEnterUp, doSpaceDown, doSpaceUp, presentValue, setStyle, setTint, updateDefault

Methods inherited from <view>

bringToFront, containsPt, getAttributeRelative, getBounds, getColor, getColorTransform, getCurrentTime, getDepthList, getDisplayObject, getID3, getMouse, getNextSelection, getPan, getPrevSelection, getProxyURL, getTotalTime, getVolume, init, isBehind, isInFrontOf, isMouseOver, measureHeight, measureWidth, play, proxyurl, searchSubviews, seek, sendAAEvent, sendBehind, sendInFrontOf, sendToBack, setAccessible, setAttributeRelative, setColor, setColorTransform, setPan, setProxyPolicy, setSource, setVolume, shouldYieldFocus, stop, unload, updateResourceSize

Methods inherited from <node>

animate, applyConstraintMethod, applyData, childOf, completeInstantiation, construct, createChildren, dataBindAttribute, destroy, determinePlacement, getOption, getUID, init, lookupSourceLocator, releaseConstraint, releaseConstraintMethod, searchImmediateSubnodes, searchSubnodes, setOption, setSelected, updateData

Methods inherited from lz.Eventable

destroy, setAttribute

Events

Events inherited from <view>

onaddsubview, onbackgroundrepeat, onblur, onclick, onclickable, onclip, oncontext, oncornerradius, ondblclick, onerror, onfocus, onframe, onframesloadratio, ongesture, onheight, onkeydown, onkeyup, onlastframe, onload, onloadratio, onmousedown, onmousedragin, onmousedragout, onmouseout, onmouseover, onmousetrackout, onmousetrackover, onmousetrackup, onmouseup, onmouseupoutside, onopacity, onplay, onplaying, onremovesubview, onshadowangle, onshadowblurradius, onshadowcolor, onshadowdistance, onstop, ontimeout, ontouch, onvisible, onwidth, onx, ony

Events inherited from <node>

onconstruct, ondata, oninit

Events inherited from lz.Eventable

ondestroy

Copyright © 2002-2010 Laszlo Systems, Inc. All Rights Reserved. Unauthorized use, duplication or distribution is strictly prohibited. This is the proprietary information of Laszlo Systems, Inc. Use is subject to license terms.

Prev  Up  Next
<basedatacombobox>  Home  <basedatepickerday>