The following example shows how you can set the selected date for a Flex DateChooser control by setting the selectedDate property to a Date object.

Full code after the jump.

View MXML

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

    <mx:DateChooser id="dateChooser1"
            selectedDate="{new Date('2008/04/19')}"
            showToday="false" />

    <mx:DateChooser id="dateChooser2"
            initialize="dateChooser2.selectedDate = new Date('2008/04/19');"
            showToday="false" />

</mx:Application>

View source is enabled in the following example.

 
Tagged with:
 
About The Author

Peter deHaan

Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.

4 Responses to Setting the selected date in a DateChooser control in Flex

  1. Vicki says:

    When using the DateField, how can I get the popup calendar to display the current date upon opening the calendar regardless of what date is in the edit field? We use a default date of ’01/01/1900′ instead of blank so when a user wants to change the ’01/01/1900′ to something valid, he clicks the calendar and the year ’1900′ is displayed. I would like the current month and year to be displayed instead of January 1900 . Thanks for your help.

  2. Peter deHaan says:

    @Vicki,

    How about this:

    <?xml version="1.0" encoding="utf-8"?>
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
     
        <mx:Script>
            <![CDATA[
                import mx.events.DropdownEvent;
     
                protected function df_openHandler(evt:DropdownEvent):void {
                    var now:Date = new Date();
                    df.displayedYear = now.fullYear;
                    df.displayedMonth = now.month;
                }
            ]]>
        </mx:Script>
     
        <mx:DateField id="df" selectedDate="{new Date(1900)}" open="df_openHandler(event);" />
     
    </mx:Application>

    Peter

    • Vicki says:

      Peter,

      I was finally able to try this code today and with a little tweaking, it worked fabulously. Thank you!

      Vicki

      • Vicki says:

        Actually, I spoke a little too soon. Yes it works for one field but I have multiple date fields that this needs to work for and each have their own “id”. Is there a way to make this function work for all id’s so I don’t have to create a function for each date field?

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

Anti-Spam Protection by WP-SpamFree