Setting the selected date in a DateChooser control in Flex

by Peter deHaan on April 2, 2008

in DateChooser

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.

{ 4 comments… read them below or add one }

1 Vicki December 2, 2009 at 3:58 pm

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.

Reply

2 Peter deHaan December 2, 2009 at 4:03 pm

@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

Reply

3 Vicki December 4, 2009 at 2:59 pm

Peter,

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

Vicki

Reply

4 Vicki December 4, 2009 at 3:07 pm

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 Comment

Sorry, this blog is terrible at eating HTML comments.
If you're pasting any HTML/XML/MXML code, you need to convert your < characters to &lt; and your > characters to &gt; .

You can 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

Previous post:

Next post: