Flex Examples » selectedDate http://blog.flexexamples.com Just a bunch of Adobe Flex Examples Wed, 26 Jan 2011 18:09:51 +0000 en hourly 1 Filtering an MX DataGrid control by date range using Flex http://blog.flexexamples.com/2010/02/01/filtering-an-mx-datagrid-control-by-date-range-using-flex/ http://blog.flexexamples.com/2010/02/01/filtering-an-mx-datagrid-control-by-date-range-using-flex/#comments Tue, 02 Feb 2010 02:11:22 +0000 Peter deHaan http://blog.flexexamples.com/?p=2366 The following example shows how you can filter an MX DataGrid control in Flex using two MX DateField control’s and filtering the ArrayCollection data provider.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2010/02/01/filtering-an-mx-datagrid-control-by-date-range-using-flex/ --> <mx:Application name="MX_DataGrid_filter_DateField_test" xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white" initialize="init();">   <mx:Script> <![CDATA[ protected const MIN_DATE:Date = new Date(2010, 0, 1); protected const MAX_DATE:Date = new [...]]]> The following example shows how you can filter an MX DataGrid control in Flex using two MX DateField control’s and filtering the ArrayCollection data provider.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/02/01/filtering-an-mx-datagrid-control-by-date-range-using-flex/ -->
<mx:Application name="MX_DataGrid_filter_DateField_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        initialize="init();">
 
    <mx:Script>
        <![CDATA[
            protected const MIN_DATE:Date = new Date(2010, 0, 1);
            protected const MAX_DATE:Date = new Date(2010, 11, 31);
 
            protected function date_labelFunc(item:Object, col:DataGridColumn):String {
                var time:Number = Date.parse(item[col.dataField]);
                return new Date(time).toDateString();
            }
 
            protected function arrColl_filterFunc(item:Object):Boolean {
                var cDate:Number = Date.parse(item.holidayDate);
 
                if (!sDate || !eDate) {
                    return true;
                }
 
                if (sDate.selectedDate && eDate.selectedDate) {
                    return (sDate.selectedDate.time <= cDate) && (eDate.selectedDate.time >= cDate);
                } else if (sDate.selectedDate) {
                    return sDate.selectedDate.time <= cDate;
                } else if (eDate.selectedDate) {
                    return eDate.selectedDate.time >= cDate;
                } else {
                    return true;
                }
            }
 
            protected function init():void {
                sDate.selectedDate = MIN_DATE;
                sDate.selectableRange = {rangeStart:MIN_DATE, rangeEnd:MAX_DATE};
 
                eDate.selectedDate = MAX_DATE;
                eDate.selectableRange = sDate.selectableRange;
            }
        ]]>
    </mx:Script>
 
    <mx:ArrayCollection id="arrColl" filterFunction="arrColl_filterFunc">
        <mx:source>
            <mx:Array>
                <mx:Object holidayName="New Years" holidayDate="2010/1/1" />
                <mx:Object holidayName="Martin Luther King, Jr. Day" holidayDate="2010/1/18" />
 
                <mx:Object holidayName="Groundhog Day" holidayDate="2010/2/2" />
                <mx:Object holidayName="Chinese New Year" holidayDate="2010/2/14" />
                <mx:Object holidayName="Valentine's Day" holidayDate="2010/2/14" />
                <mx:Object holidayName="President's Day" holidayDate="2010/2/15" />
                <mx:Object holidayName="Ash Wednesday" holidayDate="2010/2/17" />
 
                <mx:Object holidayName="Daylight Saving Time starts" holidayDate="2010/3/14" />
                <mx:Object holidayName="St. Patrick's Day" holidayDate="2010/3/17" />
                <mx:Object holidayName="First Day of Spring" holidayDate="2010/3/20" />
 
                <mx:Object holidayName="April Fool's Day" holidayDate="2010/4/1" />
                <mx:Object holidayName="Easter" holidayDate="2010/4/4" />
                <mx:Object holidayName="Administrative Professional's Day" holidayDate="2010/4/21" />
                <mx:Object holidayName="Earth Day" holidayDate="2010/4/22" />
 
                <mx:Object holidayName="Cinco De Mayo" holidayDate="2010/5/5" />
                <mx:Object holidayName="Mothers Day" holidayDate="2010/5/9" />
                <mx:Object holidayName="Armed Forces Day" holidayDate="2010/5/15" />
                <mx:Object holidayName="Memorial Day" holidayDate="2010/5/31" />
 
                <mx:Object holidayName="Flag Day" holidayDate="2010/6/14" />
                <mx:Object holidayName="Father's Day" holidayDate="2010/6/20" />
                <mx:Object holidayName="Summer Begins" holidayDate="2010/6/21" />
 
                <mx:Object holidayName="Independence Day/July 4th" holidayDate="2010/7/4" />
 
                <mx:Object holidayName="Labor Day" holidayDate="2010/9/6" />
                <mx:Object holidayName="Grandparents Day" holidayDate="2010/9/12" />
                <mx:Object holidayName="First Day of Autumn" holidayDate="2010/9/23" />
 
                <mx:Object holidayName="Columbus Day" holidayDate="2010/10/11" />
                <mx:Object holidayName="United Nations Day" holidayDate="2010/10/24" />
                <mx:Object holidayName="Halloween" holidayDate="2010/10/31" />
 
                <mx:Object holidayName="All Saints' Day" holidayDate="2010/11/1" />
                <mx:Object holidayName="Daylight Saving Time Ends" holidayDate="2010/11/7" />
                <mx:Object holidayName="Veteran's Day" holidayDate="2010/11/11" />
                <mx:Object holidayName="Thanksgiving" holidayDate="2010/11/25" />
 
                <mx:Object holidayName="Wright Brothers Day" holidayDate="2010/12/17" />
                <mx:Object holidayName="First Day Winter" holidayDate="2010/12/21" />
                <mx:Object holidayName="Christmas" holidayDate="2010/12/25" />
                <mx:Object holidayName="New Years Eve" holidayDate="2010/12/31" />
            </mx:Array>
        </mx:source>
    </mx:ArrayCollection>
 
    <mx:ApplicationControlBar dock="true">
        <mx:Form>
            <mx:FormItem label="Start date:">
                <mx:DateField id="sDate" change="arrColl.refresh();" />
            </mx:FormItem>
            <mx:FormItem label="End date:">
                <mx:DateField id="eDate" change="arrColl.refresh();" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>
 
    <mx:DataGrid id="dGrid" dataProvider="{arrColl}" width="400">
        <mx:columns>
            <mx:DataGridColumn dataField="holidayName" />
            <mx:DataGridColumn dataField="holidayDate" labelFunction="date_labelFunc" />
        </mx:columns>
    </mx:DataGrid>
 
</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2010/02/01/filtering-an-mx-datagrid-control-by-date-range-using-flex/feed/ 19 Setting the selected date in a DateChooser control in Flex http://blog.flexexamples.com/2008/04/02/setting-the-selected-date-in-a-datechooser-control-in-flex/ http://blog.flexexamples.com/2008/04/02/setting-the-selected-date-in-a-datechooser-control-in-flex/#comments Thu, 03 Apr 2008 04:49:59 +0000 Peter deHaan http://blog.flexexamples.com/2008/04/02/setting-the-selected-date-in-a-datechooser-control-in-flex/ 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 [...]]]> 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.

 
]]> http://blog.flexexamples.com/2008/04/02/setting-the-selected-date-in-a-datechooser-control-in-flex/feed/ 4 Preventing a user from deselecting dates in a DateChooser control http://blog.flexexamples.com/2007/08/15/preventing-a-user-from-deselecting-dates-in-a-datechooser-control/ http://blog.flexexamples.com/2007/08/15/preventing-a-user-from-deselecting-dates-in-a-datechooser-control/#comments Thu, 16 Aug 2007 06:35:26 +0000 Peter deHaan http://blog.flexexamples.com/2007/08/15/preventing-a-user-from-deselecting-dates-in-a-datechooser-control/ Here’s an example which prevents users from deselecting a date in the Flex DateChooser control by Ctrl-clicking on the date. By listening for the DateChooser control’s change event, and if the currently selected date is null, we set the selected date to the previously selected date. Also, for no good reason, I added a List [...]]]> Here’s an example which prevents users from deselecting a date in the Flex DateChooser control by Ctrl-clicking on the date. By listening for the DateChooser control’s change event, and if the currently selected date is null, we set the selected date to the previously selected date. Also, for no good reason, I added a List control which lets you disable certain dates in the calendar.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/15/preventing-a-user-from-deselecting-dates-in-a-datechooser-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.events.CalendarLayoutChangeEvent;

            private function dateChooser_change(evt:CalendarLayoutChangeEvent):void {
                /* Prevent deselecting of dates. */
                if (evt.currentTarget.selectedDate == null) {
                    evt.currentTarget.selectedDate = evt.newDate;
                }
            }
        ]]>
    </mx:Script>

    <mx:Array id="weekDayNames">
        <mx:String>Sun</mx:String>
        <mx:String>Mon</mx:String>
        <mx:String>Tue</mx:String>
        <mx:String>Wed</mx:String>
        <mx:String>Thu</mx:String>
        <mx:String>Fri</mx:String>
        <mx:String>Sat</mx:String>
    </mx:Array>

    <mx:String id="selDate">{dateChooser.selectedDate.toDateString()}</mx:String>

    <mx:HBox>
        <mx:VBox>
            <mx:DateChooser id="dateChooser"
                    disabledDays="{disabledDaysList.selectedIndices}"
                    selectedDate="{new Date()}"
                    dayNames="{weekDayNames}"
                    yearNavigationEnabled="true"
                    change="dateChooser_change(event)" />

            <mx:Label text="Selected date: {selDate}" />
        </mx:VBox>

        <mx:VBox>
            <mx:Label text="Disabled days:"    />
            <mx:List id="disabledDaysList"
                    width="100"
                    dataProvider="{weekDayNames}"
                    allowMultipleSelection="true" />
        </mx:VBox>
    </mx:HBox>

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2007/08/15/preventing-a-user-from-deselecting-dates-in-a-datechooser-control/feed/ 0