Flex Form Control-DateChooser Control - Adobe Flex

What is datechoose control in flex?

DateChooser control is used for displaying month name, year, and a grid of the days in a month, with columns labelled for the day of the week.

DateChooser control allows the user to select a date, a range of dates, or multiple dates. Control consists of forward and back arrow buttons to change month and year.

Class declaration

Below is the declaration for mx.controls.DateChooser class:

Public properties

S.N.

Property & Description

1

allowDisjointSelection : Boolean

If true, specifies that non-contiguous(disjoint) selection is allowed in the DateChooser control.

2

allowMultipleSelection : Boolean

If true, specifies that multiple selection is allowed in the DateChooser control.

3

dayNames : Array

The weekday names for DateChooser control.

4

disabledDays : Array

The days to disable in a week.

5

disabledRanges : Array

Disables single and multiple days.

6

displayedMonth : int

Used together with the displayedYear property, the displayedMonth property specifies the month displayed in the DateChooser control.

7

displayedYear : int

Used together with the displayedMonth property, the displayedYear property specifies the year displayed in the DateChooser control.

8

firstDayOfWeek : Object

Number representing the day of the week to display in the first column of the DateChooser control.

9

maxYear : int

The last year selectable in the control.

10

minYear : int

The first year selectable in the control.

11

monthNames : Array

Names of the months displayed at the top of the DateChooser control.

12

monthSymbol : String

This property is appended to the end of the value specified by the monthNames property to define the names of the months displayed at the top of the DateChooser control.

13

selectableRange : Object

Range of dates between which dates are selectable.

14

selectedDate : Date

Date selected in the DateChooser control.

15

selectedRanges : Array

Selected Date ranges.

16

showToday : Boolean

If true, specifies that today is highlighted in the DateChooser control.

17

yearNavigationEnabled : Boolean

Enables year navigation.

18

yearSymbol : String

This property is appended to the end of the year displayed at the top of the DateChooser control.

Protected properties

S.N.

Property & Description

1

calendarLayoutStyleFilters : Object

[read-only] The set of styles to pass from the DateChooser to the calendar layout.

2

nextMonthStyleFilters : Object

[read-only] The set of styles to pass from the DateChooser to the next month button.

3

nextYearStyleFilters : Object

[read-only] The set of styles to pass from the DateChooser to the next year button.

4

prevMonthStyleFilters : Object

[read-only] The set of styles to pass from the DateChooser to the previous month button.

5

prevYearStyleFilters : Object

[read-only] The set of styles to pass from the DateChooser to the previous year button.

Public methods

S.N.

Method & Description

1

DateChooser()

Constructor.

Events

S.N.

Event & Description

1

change

Dispatched when a date is selected or changed.

2

scroll

Dispatched when the month changes due to user interaction.

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:

Step

Description

1

Create a project with a name HelloWorld under a package com.wisdomjobs.client

2

Modify HelloWorld.mxml as explained below and skip rest of the files.

3

Compile and run the application to make sure business logic is working as per the requirements.

Below is the content of the modified mxml file src/com.wisdomjobs/HelloWorld.mxml.

After all the changes done, compile and run the application in normal mode as we did in Flex -Create Application chapter. If everything works fine with the application, this will produce below output.

datechooser

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

Adobe Flex Topics