Aligning the selected date in a DateField control in Flex

The following example shows you how you can align the selected date in the Flex DateField control’s text field by setting the textAlign style.

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.

Tagged as: textAlign