Customizing the Flex DateChooser control

The following example shows how you can customize the DateChooser control in Flex by using an embedded font, customizing the header styles, week day names, week day name styles, and colors by setting various styles and properties.

View MXML

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

    <mx:Style>
        @font-face {
            src: local("Base 02");
            fontFamily: Base02Embedded;
            unicode-range:
                U+0030-U+0039, /* 0-9 */
                U+0041-U+0051, /* Uppercase A-Z */
                U+0052-U+007A, /* Lowercase a-z */
                U+002F-U+002F; /* slash (/) */
        }

        DateChooser {
            cornerRadius: 0; /* pixels */
            headerColors: black, black;
            borderColor: black;
            themeColor: black;
            fontFamily: Base02Embedded;
            todayColor: red;
            todayStyleName: myTodayStyleName;
            headerStyleName: myHeaderStyleName;
            weekDayStyleName: myWeekDayStyleName;
            dropShadowEnabled: true;
        }

        .myTodayStyleName {
            color: white;
        }

        .myWeekDayStyleName {
            fontWeight: normal;
        }

        .myHeaderStyleName {
            color: red;
            fontSize: 16;
            fontWeight: normal;
        }
    </mx:Style>

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

            private function dateChooser_init():void {
                dateChooser.dayNames = DateBase.dayNamesShort;
            }
        ]]>
    </mx:Script>

    <mx:DateChooser id="dateChooser"
            initialize="dateChooser_init();" />

</mx:Application>

View source is enabled in the following example.

[Base02]

For an example of using embedded fonts with the Flex DateField control, see “Embedding fonts for the Flex DateField control”.

6 thoughts on “Customizing the Flex DateChooser control

  1. Hello!

    Can anyone please tell me how can i separately display year and month in a DateChooser…like I want to display year on top of the month …. and which has separate navigator like we have for month..

    Thanks…

    kichuz

  2. When you click a date in the date chooser does anyone know where that information is stored in the code so i can call it later?

    1. @LJ,

      You can get the currently selected date by using the selectedDate property:

      <mx:DateChooser id="dc" />
      <mx:Label text="{dc.selectedDate.toDateString()}" />

      Peter

Comments are closed.