A DateChooser control : DateChooser « Components « Flex

1. Flex
2. Components
3. DateChooser

A DateChooser control

       

<!--
Code from Flex 4 Documentation "Using Adobe Flex 4".

This user guide is licensed for use under the terms of the Creative Commons Attribution 
Non-Commercial 3.0 License. 

This License allows users to copy, distribute, and transmit the user guide for noncommercial 
purposes only so long as 
  (1) proper attribution to Adobe is given as the owner of the user guide; and 
  (2) any reuse or distribution of the user guide contains a notice that use of the user guide is governed by these terms. 
The best way to provide notice is to include the following link. 
To view a copy of this license, visit http://creativecommons.org/licenses/by-nc-sa/3.0/

-->



<!-- controls\date\DateChooserEvent.mxml -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:mx="library://ns.adobe.com/flex/mx">
    <fx:Script>
         
        import mx.events.CalendarLayoutChangeEvent; 
        private function useDate(eventObj:CalendarLayoutChangeEvent):void { 
          // Make sure selectedDate is not null. 
            if (eventObj.currentTarget.selectedDate == null) { 
                return; 
            } 
            //Access the Date object from the event object. 
            day.text=eventObj.currentTarget.selectedDate.getDay(); 
            date.text=eventObj.currentTarget.selectedDate.getDate(); 
            month.text=eventObj.currentTarget.selectedDate.getMonth() + 1; 
            year.text=eventObj.currentTarget.selectedDate.getFullYear(); 
            wholeDate.text= (eventObj.currentTarget.selectedDate.getMonth() + 1) + 
                "/" + (eventObj.currentTarget.selectedDate.getDate() + 
                "/" + eventObj.currentTarget.selectedDate.getFullYear()); 
        } 
      
    </fx:Script>
    <mx:DateChooser id="date1" change="useDate(event)" />
    <mx:Form x="200">
        <mx:FormItem label="Day of week">
            <mx:TextInput id="day" width="100" />
        </mx:FormItem>
        <mx:FormItem label="Day of month">
            <mx:TextInput id="date" width="100" />
        </mx:FormItem>
        <mx:FormItem label="Month">
            <mx:TextInput id="month" width="100" />
        </mx:FormItem>
        <mx:FormItem label="Year">
            <mx:TextInput id="year" width="100" />
        </mx:FormItem>
        <mx:FormItem label="Date">
            <mx:TextInput id="wholeDate" width="100" />
        </mx:FormItem>
    </mx:Form>
</s:Application>

   
    
    
    
    
    
    
  

Related examples in the same category

1.	Use DateChooser to choose date
2.	DateChooser control with
3.	Access selectedDate from DateChooser
4.	DateChooser header style
5.	DateChooser Day style
6.	Set Today style for DateChooser
7.	DateChooser control selectableRange, disabledRanges, disabledDays
8.	Set dayNames of DateChooser with initialize event
9.	Set firstDayOfWeek of DateChooser with initialize event
10.	Set headerColor of DateChooser with initialize event
11.	Set selectableRange of DateChooser with initialize event
12.	DateChooser scrolling event
13.	Set DateChooser displaying Month
14.	Set date range for DateChooser
15.	Add a DateChooser control
16.	Date entry with DateChooser
17.	Attach DateChooser to PopUpButton
18.	DateChooser Styles
19.	DateChooser Selectable
20.	Set dayNames, firstDayOfWeek, headerColor, and selectableRange properties of a DateChooser control by using an initialize event:
21.	Programmatic DateChooser Selector
22.	Get full year from selected date
23.	Set selectedDate property in a function
24.	Don't show today
25.	Check if selected date is null