Changing the Flex DateChooser control’s text alignment

The following example shows how you can change the text alignment in the Flex DateChooser control by setting the textAlign style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/12/24/changing-the-flex-datechooser-controls-text-alignment/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="textAlign:">
                <mx:ComboBox id="comboBox" selectedIndex="1">
                    <mx:dataProvider>
                        <mx:Array>
                            <mx:Object label="left" />
                            <mx:Object label="center" />
                            <mx:Object label="right" />
                        </mx:Array>
                    </mx:dataProvider>
                </mx:ComboBox>
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:DateChooser id="dateChooser"
            textAlign="{comboBox.selectedItem.label}" />

</mx:Application>

View source is enabled in the following example.

For an example of aligning the month name and year, see “Aligning headers in a DateChooser control in Flex”.

3 thoughts on “Changing the Flex DateChooser control’s text alignment

  1. Hi Peter,

    I have set the width and height for the dateChooser component. The texts are all aligned to top middle.

    Is there a way to align to align in the center.

    I have used a custom dateChooser. Which implements IUITextField. But do no where / how to set the alignment of the text to vertical middle.

    The demo link is here. With viewsource enabled. Could you pls help me.

    http://125.22.254.206/clients/FlexDemos/CalendarDemo/CalendarDemo.html

    Regards,
    Arulmurugan

Comments are closed.