Date chooser
Posted by preedagrace on June 19, 2009
Date chooser:
The DateChooser control displays the name of a month, the year, and a grid of the days of the month, with columns labeled for the day of the week. The user can select a date, a range of dates, or multiple dates. The control contains forward and back arrow buttons for changing the month and year. You can let users select multiple dates, disable the selection of certain dates, and limit the display to a range of dates.
coding:
<?xml version=”1.0″?>
<!– Simple example to demonstrate DateChooser control. –>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”>
<mx:Script>
<![CDATA[
private function displayDate(date:Date):void {
if (date == null)
selection.text = "Date selected: ";
else
selection.text = "Date selected: " + date.getFullYear().toString() +
'/' + (date.getMonth()+1).toString() + '/' + date.getDate();
}
]]>
</mx:Script>
<mx:DateFormatter id=”df”/>
<mx:Panel title=”DateChooser Control Example” height=”75%” width=”75%”
paddingTop=”10″ paddingLeft=”10″ paddingRight=”10″>
<mx:Label width=”100%” color=”blue”
text=”Select a date in the DateChooser control. Select it again to clear it.”/>
<mx:HBox horizontalGap=”25″>
<mx:VBox>
<mx:Label text=”Simple DateChooser control.”/>
<mx:DateChooser id=”dateChooser1″ yearNavigationEnabled=”true”
change=”displayDate(DateChooser(event.target).selectedDate)”/>
<mx:Label id=”selection” color=”blue” text=”Date selected:”/>
</mx:VBox>
<mx:VBox>
<mx:Label text=”Disable dates before June 1, 2006.”/>
<mx:DateChooser id=”dateChooser2″ yearNavigationEnabled=”true”
disabledRanges=”{[ {rangeEnd: new Date(2006, 5, 1)} ]}”/>
<mx:Label color=”blue” text=”Date selected: {df.format(dateChooser2.selectedDate)}”/>
</mx:VBox>
</mx:HBox>
</mx:Panel>
</mx:Application>
