Since this example uses the mx_internal namespace, you can't always depend on this behavior to work in future versions of the Flex SDK. Use at your own risk.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/03/28/hiding-the-text-field-on-an-mx-datefield-control-in-flex-3/ -->
<mx:Application name="MX_DateField_getTextInput_test"
                xmlns:mx="http://www.adobe.com/2006/mxml"
                layout="vertical"
                verticalAlign="top"
                backgroundColor="white">
 
    <mx:Script>
        <![CDATA[
            import mx.controls.TextInput;
 
            protected function init():void {
                var tf:TextInput = df.mx_internal::getTextInput();
                tf.visible = false;
                tf.includeInLayout = false;
            }
        ]]>
    </mx:Script>
 
    <mx:DateField id="df" initialize="init();" width="23" />
    <mx:Label text="{df.selectedDate}" />
 
</mx:Application>

 

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/02/01/filtering-an-mx-datagrid-control-by-date-range-using-flex/ -->
<mx:Application name="MX_DataGrid_filter_DateField_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        initialize="init();">
 
    <mx:Script>
        <![CDATA[
            protected const MIN_DATE:Date = new Date(2010, 0, 1);
            protected const MAX_DATE:Date = new Date(2010, 11, 31);
 
            protected function date_labelFunc(item:Object, col:DataGridColumn):String {
                var time:Number = Date.parse(item[col.dataField]);
                return new Date(time).toDateString();
            }
 
            protected function arrColl_filterFunc(item:Object):Boolean {
                var cDate:Number = Date.parse(item.holidayDate);
 
                if (!sDate || !eDate) {
                    return true;
                }
 
                if (sDate.selectedDate && eDate.selectedDate) {
                    return (sDate.selectedDate.time <= cDate) && (eDate.selectedDate.time >= cDate);
                } else if (sDate.selectedDate) {
                    return sDate.selectedDate.time <= cDate;
                } else if (eDate.selectedDate) {
                    return eDate.selectedDate.time >= cDate;
                } else {
                    return true;
                }
            }
 
            protected function init():void {
                sDate.selectedDate = MIN_DATE;
                sDate.selectableRange = {rangeStart:MIN_DATE, rangeEnd:MAX_DATE};
 
                eDate.selectedDate = MAX_DATE;
                eDate.selectableRange = sDate.selectableRange;
            }
        ]]>
    </mx:Script>
 
    <mx:ArrayCollection id="arrColl" filterFunction="arrColl_filterFunc">
        <mx:source>
            <mx:Array>
                <mx:Object holidayName="New Years" holidayDate="2010/1/1" />
                <mx:Object holidayName="Martin Luther King, Jr. Day" holidayDate="2010/1/18" />
 
                <mx:Object holidayName="Groundhog Day" holidayDate="2010/2/2" />
                <mx:Object holidayName="Chinese New Year" holidayDate="2010/2/14" />
                <mx:Object holidayName="Valentine's Day" holidayDate="2010/2/14" />
                <mx:Object holidayName="President's Day" holidayDate="2010/2/15" />
                <mx:Object holidayName="Ash Wednesday" holidayDate="2010/2/17" />
 
                <mx:Object holidayName="Daylight Saving Time starts" holidayDate="2010/3/14" />
                <mx:Object holidayName="St. Patrick's Day" holidayDate="2010/3/17" />
                <mx:Object holidayName="First Day of Spring" holidayDate="2010/3/20" />
 
                <mx:Object holidayName="April Fool's Day" holidayDate="2010/4/1" />
                <mx:Object holidayName="Easter" holidayDate="2010/4/4" />
                <mx:Object holidayName="Administrative Professional's Day" holidayDate="2010/4/21" />
                <mx:Object holidayName="Earth Day" holidayDate="2010/4/22" />
 
                <mx:Object holidayName="Cinco De Mayo" holidayDate="2010/5/5" />
                <mx:Object holidayName="Mothers Day" holidayDate="2010/5/9" />
                <mx:Object holidayName="Armed Forces Day" holidayDate="2010/5/15" />
                <mx:Object holidayName="Memorial Day" holidayDate="2010/5/31" />
 
                <mx:Object holidayName="Flag Day" holidayDate="2010/6/14" />
                <mx:Object holidayName="Father's Day" holidayDate="2010/6/20" />
                <mx:Object holidayName="Summer Begins" holidayDate="2010/6/21" />
 
                <mx:Object holidayName="Independence Day/July 4th" holidayDate="2010/7/4" />
 
                <mx:Object holidayName="Labor Day" holidayDate="2010/9/6" />
                <mx:Object holidayName="Grandparents Day" holidayDate="2010/9/12" />
                <mx:Object holidayName="First Day of Autumn" holidayDate="2010/9/23" />
 
                <mx:Object holidayName="Columbus Day" holidayDate="2010/10/11" />
                <mx:Object holidayName="United Nations Day" holidayDate="2010/10/24" />
                <mx:Object holidayName="Halloween" holidayDate="2010/10/31" />
 
                <mx:Object holidayName="All Saints' Day" holidayDate="2010/11/1" />
                <mx:Object holidayName="Daylight Saving Time Ends" holidayDate="2010/11/7" />
                <mx:Object holidayName="Veteran's Day" holidayDate="2010/11/11" />
                <mx:Object holidayName="Thanksgiving" holidayDate="2010/11/25" />
 
                <mx:Object holidayName="Wright Brothers Day" holidayDate="2010/12/17" />
                <mx:Object holidayName="First Day Winter" holidayDate="2010/12/21" />
                <mx:Object holidayName="Christmas" holidayDate="2010/12/25" />
                <mx:Object holidayName="New Years Eve" holidayDate="2010/12/31" />
            </mx:Array>
        </mx:source>
    </mx:ArrayCollection>
 
    <mx:ApplicationControlBar dock="true">
        <mx:Form>
            <mx:FormItem label="Start date:">
                <mx:DateField id="sDate" change="arrColl.refresh();" />
            </mx:FormItem>
            <mx:FormItem label="End date:">
                <mx:DateField id="eDate" change="arrColl.refresh();" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>
 
    <mx:DataGrid id="dGrid" dataProvider="{arrColl}" width="400">
        <mx:columns>
            <mx:DataGridColumn dataField="holidayName" />
            <mx:DataGridColumn dataField="holidayDate" labelFunction="date_labelFunc" />
        </mx:columns>
    </mx:DataGrid>
 
</mx:Application>

View source is enabled in the following example.

 

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/07/23/setting-a-custom-format-string-on-a-datefield-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white">

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="formatString:" direction="horizontal">
                <mx:Button label="YYYY/MM/DD"
                        click="dateField.formatString='YYYY/MM/DD';" />
                <mx:Button label="MM/DD/YYYY"
                        click="dateField.formatString='MM/DD/YYYY';" />
                <mx:Button label="DD/MM/YYYY"
                        click="dateField.formatString='DD/MM/YYYY';" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:DateField id="dateField"
            formatString="YYYY-MM-DD" />

</mx:Application>

View source is enabled in the following example.

 

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/06/12/setting-the-border-color-on-a-datefield-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white">

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="borderColor:">
                <mx:ColorPicker id="colorPicker" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:DateField id="dateField"
            borderColor="{colorPicker.selectedColor}" />

</mx:Application>

View source is enabled in the following example.

You can also set the borderColor style in an external .CSS file or <mx:Style /> block, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/06/12/setting-the-border-color-on-a-datefield-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white">

    <mx:Style>
        DateField {
            borderColor: haloOrange;
        }
    </mx:Style>

    <mx:DateField id="red" />

</mx:Application>

Or, you can set the borderColor style using ActionScript, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/06/12/setting-the-border-color-on-a-datefield-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.events.ColorPickerEvent;

            private function colorPicker_change(evt:ColorPickerEvent):void {
                dateField.setStyle("borderColor", evt.color);
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="borderColor:">
                <mx:ColorPicker id="colorPicker"
                        change="colorPicker_change(event);" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:DateField id="dateField" />

</mx:Application>

 

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/04/30/determining-when-the-datefield-control-is-opened-or-closed-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.events.DropdownEvent;

            private function dateField_openClose(evt:DropdownEvent):void {
                arrColl.addItem(evt);
            }
        ]]>
    </mx:Script>

    <mx:ArrayCollection id="arrColl" />

    <mx:ApplicationControlBar dock="true">
        <mx:DateField id="dateField"
                open="dateField_openClose(event);"
                close="dateField_openClose(event);" />
    </mx:ApplicationControlBar>

    <mx:DataGrid id="dataGrid"
            dataProvider="{arrColl}"
            itemRenderer="mx.controls.Label"
            width="100%"
            height="100%" />

</mx:Application>

View source is enabled in the following example.

And here is the “same” example, but in ActionScript instead of MXML:

comps/MyDateField.as

/** http://blog.flexexamples.com/2008/04/30/determining-when-the-datefield-control-is-opened-or-closed-in-flex/ */
package comps {
    import mx.collections.ArrayCollection;
    import mx.containers.VBox;
    import mx.controls.DataGrid;
    import mx.controls.DateField;
    import mx.controls.Label;
    import mx.core.Application;
    import mx.core.ClassFactory;
    import mx.events.DropdownEvent;

    public class MyDateField extends VBox {

        [Bindable]
        private var arrColl:ArrayCollection;

        private var dateField:DateField;
        private var dataGrid:DataGrid;

        public function MyDateField() {
            super();
            init();
        }

        private function init():void {
            arrColl = new ArrayCollection();

            dateField = new DateField();
            dateField.addEventListener(DropdownEvent.OPEN, dateField_openClose);
            dateField.addEventListener(DropdownEvent.CLOSE, dateField_openClose);

            dataGrid = new DataGrid();
            dataGrid.dataProvider = arrColl;
            dataGrid.itemRenderer = new ClassFactory(mx.controls.Label);
            dataGrid.percentWidth = 100;
            dataGrid.percentHeight = 100;

            Application.application.appControlBar.addChild(dateField);

            addChild(dataGrid)
        }

        private function dateField_openClose(evt:DropdownEvent):void {
            arrColl.addItem(evt);
        }
    }
}

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/04/30/determining-when-the-datefield-control-is-opened-or-closed-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        xmlns:comps="comps.*"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:ApplicationControlBar id="appControlBar" dock="true" />

    <comps:MyDateField width="100%" height="100%" />

</mx:Application>

View source is enabled in the following example.

 

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/04/28/aligning-the-selected-date-in-a-datefield-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.events.ItemClickEvent;

            private function init():void {
                dateField.selectedDate = new Date();
            }

            private function toggleButtonBar_itemClick(evt:ItemClickEvent):void {
                dateField.setStyle("textAlign", evt.item.label);
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:ToggleButtonBar id="toggleButtonBar"
                selectedIndex="1"
                itemClick="toggleButtonBar_itemClick(event);">
            <mx:dataProvider>
                <mx:Array>
                    <mx:Object label="left" />
                    <mx:Object label="center" />
                    <mx:Object label="right" />
                </mx:Array>
            </mx:dataProvider>
        </mx:ToggleButtonBar>
    </mx:ApplicationControlBar>

    <mx:DateField id="dateField"
            width="200"
            textAlign="center"
            initialize="init();" />

</mx:Application>

View source is enabled in the following example.

 

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/12/28/changing-the-default-calendar-icon-in-a-flex-datefield-control/ -->
<mx:Application name="DateField_skin_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white">
 
    <mx:Style>
        DateField {
            skin: Embed("clock_add.png");
            /* null the skins defined in default.css */
            upSkin: ClassReference(null);
            overSkin: ClassReference(null);
            downSkin: ClassReference(null);
            disabledSkin: ClassReference(null);
        }
    </mx:Style>
 
    <mx:DateField id="dateField" />
 
</mx:Application>

View source is enabled in the following example.

 

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/12/23/removing-the-drop-shadow-from-the-datefield-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white">

    <mx:Style>
        .myDateChooser {
            dropShadowEnabled: false;
        }
    </mx:Style>

    <mx:Form>
        <mx:FormItem label="With drop shadow:">
            <mx:DateField />
        </mx:FormItem>
        <mx:FormItem label="Without drop shadow:">
            <mx:DateField dateChooserStyleName="myDateChooser" />
        </mx:FormItem>
    </mx:Form>

</mx:Application>

View source is enabled in the following example.

 

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/12/22/customizing-the-current-date-in-a-flex-datefield-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white">

    <mx:Style>
        DateField {
            dateChooserStyleName: myDateChooser;
        }

        .myDateChooser {
            todayIndicatorSkin: Embed("star.png");
            todayStyleName: myToday;
        }

        .myToday {
            color: black;
            fontWeight: bold;
        }
    </mx:Style>

    <mx:DateField id="dateField" />

</mx:Application>

View source is enabled in the following example.

 

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/12/20/setting-the-first-day-of-the-week-in-a-flex-datefield-controls-calendar/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.events.SliderEvent;
            import mx.formatters.DateBase;

            private function dateField_labelFunc(item:Date):String {
                return dateFormatter.format(item);
            }

            private function slider_change(evt:SliderEvent):void {
                dateField.firstDayOfWeek = evt.value;
                dateField.open();
            }

            private function slider_dataTipFunc(value:Number):String {
                return DateBase.dayNamesShort[value];
            }
        ]]>
    </mx:Script>

    <mx:DateFormatter id="dateFormatter" formatString="MMM D, YYYY"/>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="firstDayOfWeek:">
                <mx:HSlider id="slider"
                        minimum="0"
                        maximum="6"
                        liveDragging="true"
                        snapInterval="1"
                        tickInterval="1"
                        dataTipFormatFunction="slider_dataTipFunc"
                        change="slider_change(event);" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:DateField id="dateField"
            labelFunction="dateField_labelFunc"
            firstDayOfWeek="{Days.MONDAY}" />

</mx:Application>

View Days.as

package {
    public class Days {
        public static const SUNDAY:uint = 0;
        public static const MONDAY:uint = 1;
        public static const TUESDAY:uint = 2;
        public static const WEDNESDAY:uint = 3;
        public static const THURSDAY:uint = 4;
        public static const FRIDAY:uint = 5;
        public static const SATURDAY:uint = 6;

        public function Days() {
        }
    }
}

View source is enabled in the following example.

For other examples of setting the firstDayOfWeek property (mainly for the DateChooser control), see “Setting the DateChooser control’s dayNames property and firstDayOfWeek property” and “Changing the calendar layout in the DateChooser component using the firstDayOfWeek parameter”.