Flex - DateChooser Control

---

The DateChooser control is used to display 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 DateChooser control let the user to select a date, a range of dates, or multiple dates. The control contains forward and back arrow buttons for changing the month and year.

Class Declaration

Following is the declaration for mx.controls.DateChooser class −

public class DateChooser 
   extends UIComponent 
      implements IFocusManagerComponent, IFontContextComponent

Public Properties

Protected Properties

Public Methods

Events

Methods Inherited

This class inherits methods from the following classes −

• mx.core.UIComponent
• mx.core.FlexSprite
• flash.display.Sprite
• flash.display.DisplayObjectContainer
• flash.display.InteractiveObject
• flash.display.DisplayObject
• flash.events.EventDispatcher
• Object

Flex DateChooser Control Example

Let us follow the following steps to check usage of DateChooser control in a Flex application by creating a test application −

Following is the content of the modified mxml file src/com.tutorialspoint/HelloWorld.mxml.

<?xml version = "1.0" encoding = "utf-8"?>
<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"
   width = "100%" height = "100%" minWidth = "500" minHeight = "500"
   applicationComplete = "application_applicationCompleteHandler(event)">

   <fx:Style source = "/com/tutorialspoint/client/Style.css" />
   <fx:Script>
      <![CDATA[
         import mx.events.CalendarLayoutChangeEvent;
         import mx.events.FlexEvent;

         [Bindable]
         private var selectedDate:String = "";
         protected function dateChooser_changeHandler
            event:CalendarLayoutChangeEvent):void {            
            var date:Date = DateChooser(event.target).selectedDate;
            selectedDate = dateFormatter.format(date);
         }
			
         protected function application_applicationCompleteHandler
            (event:FlexEvent):void {
            selectedDate = dateFormatter.format(new Date());
         }
      ]]>
   </fx:Script>
   
   <s:BorderContainer width = "550" height = "400" id = "mainContainer" 
      styleName = "container">
      <s:VGroup width = "100%" height = "100%" gap = "50" 
         horizontalAlign = "center" verticalAlign = "middle">
         <s:Label id = "lblHeader" text = "Form Controls Demonstration" 
            fontSize = "40" color = "0x777777" styleName = "heading" />
         
         <s:Panel id = "dateChooserPanel" title = "Using DateChooser" width = "400" 
            height = "300" includeInLayout = "true" visible = "true">
            <s:layout>
               <s:HorizontalLayout  gap = "10" verticalAlign = "middle" 
                  horizontalAlign = "center" />	
            </s:layout>
            
            <mx:DateChooser id = "dateChooser" yearNavigationEnabled = "true"
               change = "dateChooser_changeHandler(event)" />
            <s:Label id = "selection" fontWeight = "bold" 
               text = "Date selected: {selectedDate}" />
         </s:Panel>			
      </s:VGroup>	 
   </s:BorderContainer>	
</s:Application>

Once you are ready with all the changes done, let us compile and run the application in normal mode as we did in Flex - Create Application chapter. If everything is fine with your application, it will produce the following result: [ Try it online ]