View comments | RSS feed
Methods | Properties | Effects | Events | Styles | Examples Frames | No Frames

mx.controls
Class DateField

Inheritance ImageInheritance ImageInheritance Image

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."
   firstDayOfWeek="0"
     monthNames="["January", "February", "March", "April", "May",
     "June", "July", "August", "September",
   "October", "November", "December"]"
   headerColors="[0xE6EEEE,0xFFFFFF]"
   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." 
 />

Click here to view the Examples

Constructors
DateField ( )
Constructor



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

Methods inherited from class mx.controls.ComboBase
addItem   addItemAt   getDataProvider   getItemAt   getLength   getSelectedIndex   getSelectedIndices   getSelectedItem   getSelectedItems   layoutChildren   measure   removeAll   removeItemAt   replaceItemAt   setDataProvider   sortItems   sortItemsBy  

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

Methods inherited from class mx.core.UIObject
addEventListener   applyProperties   buildDepthTable   commitProperties   constructObject2   createAccessibilityImplementation   createChildAtDepth   createChildren   createClassChildAtDepth   createClassObject   createEmptyObject   destroyObject   dispatchEvent   doLater   draw   drawRect   executeBindings   fillRect   findNextAvailableDepth   getRepeaterItem   getStyle   handleEvent   init   invalidate   invalidateLayout   invalidateProperties   invalidateSize   invalidateStyle   layoutChildren   measure   move   redraw   removeEventListener   setDepthAbove   setDepthBelow   setMask   setSize   setSizeNoLayout   setStyle   swapDepths  



Properties
       dateFormatter: Function
Function used to format the date displayed in the text field of the DateField control.
       dayNames: Array
 Weekday names for DateChooser control.
       disabledDays: Array
 Days to disable in a week.
       disabledRanges: Array
 Disables single and multiple days.
       displayedMonth: Number
 Used with the displayedYear property, the displayedMonth property specifies the month displayed in the DateChooser control.
       displayedYear: Number
 Used with the displayedMonth property, the displayedYear property determines which month is displayed in the DateChooser control.
       firstDayOfWeek: Number
 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.
       headerStyleDeclaration: String
 Style sheet definition to configure the date text in the header area of the control.
       monthNames: Array
 Names of the months displayed at the top of the DateChooser control.
       pullDown: Object    [Read-Only]
Read-only property that contains a reference to the DateChooser control contained by the DateField.
       scaleY: var    [Write-Only]
height scaling is not supported for this control
       selectableRange: Object
 Range of dates between which dates are selectable.
       selectedDate: Date
 Date as selected in the DateChooser control.
       showToday: Boolean
 If true, specifies that today is highlighted in DateChooser control.
       todayStyleDeclaration: String
 Style sheet definition to configure the appearence of the numeric text of the current day, which is highlighted in the control when the showToday property is true.
staticversion: String
Version string for this class.
       weekDayStyleDeclaration: String
 Style sheet definition to configure the weekday names of the control.

Properties inherited from class mx.controls.ComboBase
dataProvider   editable   length   restrict   selectedIndex   selectedItem   text   textField   value   version  

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

Properties inherited from class mx.core.UIObject
alpha   baselinePosition   className   depth   documentDescriptor   height   heightFlex   id   instanceIndices   isDocument   kStretch   layoutHeight   layoutWidth   maxHeight   maxWidth   minHeight   minWidth   mouseX   mouseY   nestLevel   oldHeight   oldWidth   oldX   oldY   parent   parentApplication   parentDocument   percentHeight   percentWidth   preferredHeight   preferredWidth   repeaterIndices   scaleX   scaleY   styleName   tabEnabled   toolTip   version   visible   width   widthFlex   x   y  



Effects

Effects inherited from class mx.core.UIComponent
focusInEffect   focusOutEffect  

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



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

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

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



Styles
headerColor Type: Number   Format: Color   CSS Inheritance: yes
Color of the band at the top of the DateChooser control. The default value is 0xE6EEEE. Deprecated - use headerColors instead.
headerColors Type: Array   CSS Inheritance: yes
Colors of the band at the top of the DateChooser control. The default value is [0xE6EEEE,0xFFFFFF].
rollOverColor Type: Number   Format: Color   CSS Inheritance: yes
Color of the background when the user rolls over a date in the DateChooser control. The default value is 0xE3FFD6.
selectionColor Type: Number   Format: Color   CSS Inheritance: yes
Color of the background of the currently selected date in the DateChooser control. The default value is 0xCDFFC1.
todayColor Type: Number   Format: Color   CSS Inheritance: yes
Color of the highlight of today's date in the DateChooser control. The default value is 0x2B333C.

Styles inherited from class mx.core.UIComponent
backgroundAlpha   backgroundColor   backgroundDisabledColor   backgroundImage   backgroundSize   barColor   borderCapColor   borderColor   borderSides   borderStyle   borderThickness   cornerRadius   disabledColor   dropShadow   errorColor   fillColors   highlightColor   modalTransparency   scrollTrackColor   selectedFillColors   shadowCapColor   shadowColor   shadowDirection   shadowDistance   symbolBackgroundColor   symbolBackgroundDisabledColor   symbolBackgroundPressedColor   symbolColor   symbolDisabledColor   themeColor  

Styles inherited from class mx.core.UIObject
color   fontFamily   fontSize   fontStyle   fontWeight   horizontalGap   leading   marginLeft   marginRight   textAlign   textDecoration   textIndent   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  

Function used to format the date displayed in the text field of the DateField control. The function takes a Date object as a parameter, and returns a string in the format to be displayed. If no function is specified, then the default format is used. Default value is undefined.

dayNames

dayNames: Array  

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  

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  

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  

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  

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  

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 text in the header area of the control. If omitted, the header area inherits the text styles of the control.

monthNames

monthNames: Array  

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.

scaleY

scaleY: var   [Write-Only]

height scaling is not supported for this control

selectableRange

selectableRange: Object  

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.
The Object contains two properties, rangeStart and rangeEnd, of type Date. 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 directly.

selectedDate

selectedDate: Date  

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

showToday

showToday: Boolean  

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 appearence of the numeric text of the current day, which is highlighted in the control when the showToday property is true. If omitted, the current day text inherits the text styles of the control.

version

static  version: String  

Version string for this class.

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.


Examples
DateFieldExample.mxml 
<?xml version="1.0" encoding="utf-8"?>
<!-- Simple example to demonstrate DateField control -->
<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml" backgroundColor="#FFFFFF">

    <mx:Panel title="Date Field Panel">

        <!-- Simple DateField control with a text field that shows the date with a calendar icon to the right -->
        <mx:Box direction="horizontal">

            <mx:Label text="DateField"/>
            <mx:DateField width="100"/>

        </mx:Box>

    </mx:Panel>

</mx:Application>



Comments


gmorphis said on Sep 9, 2005 at 11:21 AM :
I believe that when you write to the datefield using the selectedDate function it should change the value in the text box to represent the value of the date selected. It doesnt do this currently however can it be added as a request?
Thanks
mpeterson said on Sep 11, 2005 at 4:24 AM :
Regarding the previous comment,
thanks for the comment, but LiveDocs is not a support forum. Do make enhancement requests, please see the "Feature Request" link at the Macromedia Flex Support Center:
http://www.macromedia.com/support/flex/

- Mike Peterson
Flex documentation team
Jesse ZH said on Oct 26, 2005 at 1:44 PM :
When you select the same date as the selectedDate, the dateField will be empty. How to disable it ?
smgilson said on Oct 27, 2005 at 7:43 AM :
I filed an enhancement request for the next release so that selecting the same data does not clear the text.

Stephen

 

RSS feed | Send me an e-mail when comments are added to this page | Comment Report

Current page: http://livedocs.adobe.com/flex/15/asdocs_en/mx/controls/DateField.html