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.

One thought on “Aligning the selected date in a DateField control in Flex

  1. Ehm, using the label for this is probably not the best coding style, especially when it comes to localisation… talking about localisation: Changing the language of a Flex application on the fly could be a nice tutorial as well!

    Thanks for all the stuff you provide here!

    Klaus

Comments are closed.