mx.controls
Class DateField

class DateField
extends mx.controls.ComboBase

The DateField control is a text field that shows the date with a calendar icon on its right side. When the user clicks anywhere inside the bounding box of the control, a DateChooser control pops up and shows the dates in the month of the current date. If no date is selected, the text field is blank and the month of the current date is displayed in the DateChooser control.

When the DateChooser control is open, the user can scroll through months and years, and select a date. When a date is selected, the DateChooser control closes, and the text field shows the selected date.

MXML Syntax

The <mx:DateField> tag inherits all the properties of its parent classes, and the following properties: 

 <mx:DateField
   dateFormatter="No default."
   dayNames="["S", "M", "T", "W", "T", "F", "S"]"
   disabledDays="No default."
   disabledRanges="No default."
   displayedMonth="Month number of the current date."
   displayedYear="Current year."
   downArrowDisabledName="PullDownIconDisabled"
   downArrowDownName="PullDownIconOver"
   downArrowOverName="PullDownIconDown"
   downArrowUpName=PullDownIcon""
   firstDayOfWeek="0"
     monthNames="["January", "February", "March", "April", "May",
     "June", "July", "August", "September",
   "October", "November", "December"]"
   headerColor="#0FFFFFF"
   headerStyleDeclaration="No default."
    rollOverColor="#0xCDFFC1"
   selectableRange="No default."
   selectedDate="No default."
   selectionColor="#0xCDFFC1"
   showToday="true|false"
   todayColor=""
   todayStyleDeclaration="No default."
   weekdayStyleDeclaration="No default."
   change="Event handler; no default."
   close="Event handler; no default."
   open="Event handler; no default."
   scroll="Event handler; no default." 
 />


Constructors
DateField ()
Constructor


Methods
      close() : Void
Closes the DateChooser control.
      open() : Void
Opens the DateChooser control.

Methods inherited from class mx.controls.ComboBase
setSize 

Methods inherited from class mx.core.UIComponent
getFocus  setFocus  getFocusManager 

Methods inherited from class mx.core.UIObject
createAccessibilityImplementation  measure  doLater  cancelAllDoLaters  invalidate  invalidateStyle  invalidateProperties  invalidateSize  redraw  move  setSize  setSizeNoLayout  drawRect  fillRect  destroyLabel  createClassObject  createEmptyObject  destroyObject  getStyle  setMask  swapDepths 


Properties
staticversion:String  
ComponentVersion is for internal use only.
      todayStyleDeclaration:String  
Style sheet definition to configure the numeric date text of the control.
      headerStyleDeclaration:String  
Style sheet definition to configure the date in the header area of the control.
      weekDayStyleDeclaration:String  
Style sheet definition to configure the weekday names of the control.
      dateFormatter:Function   [Read-Write]
Function used to format the date displayed in the text field of the DateField control.
      pullDown:Object   [Read-Only]
Read-only property that contains a reference to the DateChooser control contained by the DateField.
      showToday:Boolean   [Read-Write]
If true, specifies that today is highlighted in DateChooser control.
      firstDayOfWeek:Number   [Read-Write]
Day of the week (0-6, where 0 is the first element of the dayNames array) to display in the first column of the DateChooser control.
      displayedMonth:Number   [Read-Write]
Used with the displayedYear property, the displayedMonth property specifies the month displayed in the DateChooser control.
      displayedYear:Number   [Read-Write]
Used with the displayedMonth property, the displayedYear property determines which month is displayed in the DateChooser control.
      dayNames:Array   [Read-Write]
Weekday names for DateChooser control.
      disabledDays:Array   [Read-Write]
Days to disable in a week.
      selectableRange:Object   [Read-Write]
Range of dates between which dates are selectable.
      disabledRanges:Array   [Read-Write]
Disables single and multiple days.
      selectedDate:Date   [Read-Write]
Date as selected in the DateChooser control.
      monthNames:Array   [Read-Write]
Names of the months displayed at the top of the DateChooser control.

Properties inherited from class mx.controls.ComboBase
version  dataProvider  addItemAt  addItem  removeItemAt  removeAll  replaceItemAt  sortItemsBy  sortItems  length  getItemAt  value  selectedIndex  selectedItems  selectedItem  multipleSelection  editable  text  textField  restrict 

Properties inherited from class mx.core.UIComponent
version  enabled  tabIndex 

Properties inherited from class mx.core.UIObject
version  nestLevel  dispatchEvent  addEventListener  handleEvent  removeEventListener  kStretch  styleName  className  setStyle  parentApplication  isDocument  parentDocument  documentDescriptor  descriptor  instanceIndices  repeaterIndices  getRepeaterItem  id  width  height  x  y  minHeight  minWidth  preferredHeight  preferredWidth  maxHeight  maxWidth  widthFlex  heightFlex  visible  scaleX  scaleY  alpha  depth  mouseX  mouseY  toolTip  baselinePosition 


Effects

Effects inherited from class mx.core.UIComponent
showEffect  hideEffect  focusInEffect  focusOutEffect 

Effects inherited from class mx.core.UIObject
creationCompleteEffect  moveEffect  resizeEffect  mouseDownEffect  mouseOverEffect  mouseOutEffect  mouseUpEffect 


Events
changeEvent handler for change events, which are broadcast when a date is selected. Target contains a reference to the component that triggered the event. Type contains the name of the event.
openEvent handler for open events, which are broadcast when a user selects the field to open the drop-down list. Target contains a reference to the component that triggered the event. Type contains the name of the event.
closeEvent handler for close events, which are broadcast when a date is selected or the user clicks outside the drop-down list. Target contains a reference to the component that triggered the event. Type contains the name of the event.
scrollEvent handler for scroll events, which are broadcast when the month changes due to user interaction. Target contains a reference to the component that triggered the event. Type contains the name of the event.

Events inherited from class: mx.core.UIComponent
focusIn  focusOut  keyDown  keyUp  show  hide  valid  invalid  valueCommitted 

Events inherited from class: mx.core.UIObject
initialize  creationComplete  resize  move  draw  load  unload  mouseDown  mouseUp  mouseMove  mouseOver  mouseOut  mouseDownSomewhere  mouseUpSomewhere  mouseMoveSomewhere  mouseChangeSomewhere  effectStart  effectEnd  dragBegin  dragComplete  dragEnter  dragOver  dragExit  dragDrop 


Styles
headerColor Type: Number   Format: Color   CSS Inheritance: yes
Color of the band at the top of the DateChooser control. The default value is #0FFFFFF.
rollOverColor Type: Number   Format: Color   CSS Inheritance: yes
Color of the background when the user rolls over the DateField. The default value is #0xE3FFD6
selectionColor Type: Number   Format: Color   CSS Inheritance: yes
Color of the background when the user selects the DateField. The default value is #0xCDFFC1.
todayColor Type: Number   Format: Color   CSS Inheritance: yes
Color of today`s date. The default value is #2B333C.

Styles inherited from class mx.core.UIComponent
backgroundColor  backgroundDisabledColor  backgroundImage  backgroundAlpha  backgroundSize  barColor  borderCapColor  borderColor  buttonColor  borderStyle  disabledColor  errorColor  highlightColor  lineHeight  modalTransparency  scrollTrackColor  shadowColor  shadowCapColor  symbolColor  symbolBackgroundColor  symbolBackgroundDisabledColor  symbolBackgroundPressedColor  symbolDisabledColor  themeColor 

Styles inherited from class mx.core.UIObject
color  fontFamily  fontSize  fontStyle  fontWeight  textAlign  textDecoration  textIndent  marginLeft  marginRight  horizontalGap  verticalGap 


Constructor Detail

DateField

DateField()

Constructor


Method Detail

close

close() : Void

Closes the DateChooser control.

open

open() : Void

Opens the DateChooser control.


Property Detail

dateFormatter

dateFormatter:Function   [Read-Write]

Function used to format the date displayed in the text field of the DateField control. The function receives a Date object as a parameter, and returns a string in the format to be displayed.

dayNames

dayNames:Array   [Read-Write]

Weekday names for DateChooser control. Setting this property changes the day labels of the DateChooser control. Sunday is the first day (at index 0). The rest of the week names follow in the normal order. The default is ["S", "M", "T", "W", "T", "F", "S"].

disabledDays

disabledDays:Array   [Read-Write]

Days to disable in a week. All the dates in a month, for the specified day, are disabled. This property immediately changes the user interface of the DateChooser control. The elements of this array can have values from 0 (Sunday) to 6 (Saturday). For example, a value of "[0,6]" disables Sunday and Saturday.

disabledRanges

disabledRanges:Array   [Read-Write]

Disables single and multiple days. This property accepts an Array of objects as a parameter. Each object in this array is: a Date object, specifying a single day to disable; or an object containing either or both of the rangeStart and rangeEnd properties, each of whose values is a Date object. The value of these properties describes the boundaries of the date range. If either is omitted, the range is considered unbounded in that direction. If you specify only rangeStart, all the dates after the specified date are disabled, including the rangeStart date. If you specify only rangeEnd, all the dates before the specified date are disabled, including the rangeEnd date. To disable a single day, use a Date object specifying a date in the Array along with other objects. Setting this property immediately changes the appearance of the DateChooser control, if the disabled dates are included in the displayedMonth and displayedYear properties.

displayedMonth

displayedMonth:Number   [Read-Write]

Used with the displayedYear property, the displayedMonth property specifies the month displayed in the DateChooser control. Month numbers are zero-based, so January is 0 and December is 11. Setting this property immediately changes the appearance of the DateChooser control. The default value is the month number of today`s date.

displayedYear

displayedYear:Number   [Read-Write]

Used with the displayedMonth property, the displayedYear property determines which month is displayed in the DateChooser control. Setting this property immediately changes the appearance of the DateChooser control. The default value is today`s year.

firstDayOfWeek

firstDayOfWeek:Number   [Read-Write]

Day of the week (0-6, where 0 is the first element of the dayNames array) to display in the first column of the DateChooser control. Setting this property changes the order of the day columns. The default value is 0.

headerStyleDeclaration

headerStyleDeclaration:String  

Style sheet definition to configure the date in the header area of the control. If omitted, the header area inherits the text styles of the control.

monthNames

monthNames:Array   [Read-Write]

Names of the months displayed at the top of the DateChooser control. The default value is: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"].

pullDown

pullDown:Object   [Read-Only]

Read-only property that contains a reference to the DateChooser control contained by the DateField. The DateChooser control is instantiated when a user clicks the DateField component. However, if this property is referenced before the user clicks the component, the DateChooser is instantiated and then hidden. Subsequent clicks on the component result in use of same instance of DateChooser.

selectableRange

selectableRange:Object   [Read-Write]

Range of dates between which dates are selectable. For example, a date between 04-12-2001 and 04-12-2003 is selectable, but dates out of this range are disabled. This property accepts an object as a parameter. This Object contains two Date objects, the rangeStart and rangeEnd properties. If you specify only rangeStart, all the dates after the specified date are enabled. If you only specify rangeEnd, all the dates before the specified date are enabled. to enable only a single day in a DateChooser control, you can pass a Date object can be directly.

selectedDate

selectedDate:Date   [Read-Write]

Date as selected in the DateChooser control. Accepts a Date object as parameter.

showToday

showToday:Boolean   [Read-Write]

If true, specifies that today is highlighted in DateChooser control. Setting this property immediately changes the appearance of the DateChooser control. The default value is true.

todayStyleDeclaration

todayStyleDeclaration:String  

Style sheet definition to configure the numeric date text of the control. If omitted, the date text field inherits the text styles of the control.

version

static version:String  

ComponentVersion is for internal use only.

weekDayStyleDeclaration

weekDayStyleDeclaration:String  

Style sheet definition to configure the weekday names of the control. If omitted, the weekday names inherit the text styles of the control.