Flex Examples » rangeEnd http://blog.flexexamples.com Just a bunch of Adobe Flex Examples Wed, 26 Jan 2011 18:09:51 +0000 en hourly 1 Selecting entire weeks in an MX DateChooser control in Flex 3 http://blog.flexexamples.com/2010/03/19/selecting-entire-weeks-in-an-mx-datechooser-control-in-flex-3/ http://blog.flexexamples.com/2010/03/19/selecting-entire-weeks-in-an-mx-datechooser-control-in-flex-3/#comments Fri, 19 Mar 2010 23:08:00 +0000 Peter deHaan http://blog.flexexamples.com/?p=2618 The following example shows how you can make the MX DateChooser control select entire dates in the calendar by listening for the change event and then setting the selectedRanges property.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2010/03/19/selecting-entire-weeks-in-an-mx-datechooser-control-in-flex-3/ --> <mx:Application name="MX_DateChooser_selectedRanges_test" xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white">   <mx:Script> <![CDATA[ import mx.events.CalendarLayoutChangeEvent;   protected function iChooChooChooseYou_changeHandler(evt:CalendarLayoutChangeEvent):void { var dat:Date [...]]]> The following example shows how you can make the MX DateChooser control select entire dates in the calendar by listening for the change event and then setting the selectedRanges property.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/03/19/selecting-entire-weeks-in-an-mx-datechooser-control-in-flex-3/ -->
<mx:Application name="MX_DateChooser_selectedRanges_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    <mx:Script>
        <![CDATA[
            import mx.events.CalendarLayoutChangeEvent;
 
            protected function iChooChooChooseYou_changeHandler(evt:CalendarLayoutChangeEvent):void {
                var dat:Date = evt.newDate;
                if (dat) {
                    var strtDat:Date = new Date(dat.time);
                    strtDat.setDate(strtDat.date - strtDat.day);
                    var endDat:Date = new Date(strtDat.time);
                    endDat.setDate(endDat.date + 6);
                    iChooChooChooseYou.selectedRanges = [{rangeStart:strtDat, rangeEnd:endDat}];
 
                    iChooChooChooseYou.validateNow();
                    rangeSt.htmlText = "<b>rangeStart:</b> " + (iChooChooChooseYou.selectedRanges[0].rangeStart as Date).toDateString();
                    rangeEd.htmlText = "<b>rangeEnd:</b> " + (iChooChooChooseYou.selectedRanges[0].rangeEnd as Date).toDateString();
                }
            }
        ]]>
    </mx:Script>
 
    <mx:VBox>
        <mx:DateChooser id="iChooChooChooseYou"
                allowMultipleSelection="true"
                allowDisjointSelection="false"
                yearNavigationEnabled="true"
                change="iChooChooChooseYou_changeHandler(event);" />
        <mx:Label id="rangeSt" width="100%" />
        <mx:Label id="rangeEd" width="100%" />
    </mx:VBox>
 
</mx:Application>
 
]]> http://blog.flexexamples.com/2010/03/19/selecting-entire-weeks-in-an-mx-datechooser-control-in-flex-3/feed/ 3 Setting a minimum and maximum allowable year in the DateChooser control in Flex http://blog.flexexamples.com/2008/05/04/setting-a-minimum-and-maximum-allowable-year-in-the-datechooser-control-in-flex/ http://blog.flexexamples.com/2008/05/04/setting-a-minimum-and-maximum-allowable-year-in-the-datechooser-control-in-flex/#comments Mon, 05 May 2008 06:47:06 +0000 Peter deHaan http://blog.flexexamples.com/2008/05/04/setting-a-minimum-and-maximum-allowable-year-in-the-datechooser-control-in-flex/ The following examples show how you can set a minimum and maximum allowable year in the Flex DateChooser control by setting the minYear and maxYear properties.

Full code after the jump.

The following example sets the maximum year to the current year, preventing you from using the month-based or year-based navigation to advance to [...]]]> The following examples show how you can set a minimum and maximum allowable year in the Flex DateChooser control by setting the minYear and maxYear properties.

Full code after the jump.

The following example sets the maximum year to the current year, preventing you from using the month-based or year-based navigation to advance to future years (but future months within the same year are allowed):

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/05/04/setting-a-minimum-and-maximum-allowable-year-in-the-datechooser-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:DateChooser id="dateChooser"
            yearNavigationEnabled="true"
            initialize="dateChooser.maxYear = new Date().fullYear;" />

</mx:Application>

View source is enabled in the following example.

The following example sets the minimum year to the current year, preventing you from using the month-based or year-based navigation to advance to previous years (but previous months within the same year are allowed). Also, a disabled range is set up using the disabledRanges property which specifies a rangeEnd value of the current date, preventing users from selecting any days prior to today:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/05/04/setting-a-minimum-and-maximum-allowable-year-in-the-datechooser-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:DateChooser id="dateChooser"
            yearNavigationEnabled="true"
            initialize="dateChooser.minYear = new Date().fullYear;"
            disabledRanges="{[{rangeEnd:new Date()}]}" />

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2008/05/04/setting-a-minimum-and-maximum-allowable-year-in-the-datechooser-control-in-flex/feed/ 5 Setting selectable ranges in the Flex DateField control http://blog.flexexamples.com/2007/12/17/setting-selectable-ranges-in-the-flex-datefield-control/ http://blog.flexexamples.com/2007/12/17/setting-selectable-ranges-in-the-flex-datefield-control/#comments Tue, 18 Dec 2007 06:10:06 +0000 Peter deHaan http://blog.flexexamples.com/2007/12/17/setting-selectable-ranges-in-the-flex-datefield-control/ The following example shows the various usages of the selectableRange property for the DateField control in Flex.

The first usage only sets the rangeStart value within the selectableRange property Object. This allows you to have a calendar which allows the user to only select dates after the specified date. Similarly, the second usage only [...]]]> The following example shows the various usages of the selectableRange property for the DateField control in Flex.

The first usage only sets the rangeStart value within the selectableRange property Object. This allows you to have a calendar which allows the user to only select dates after the specified date. Similarly, the second usage only sets the rangeEnd value within the selectableRange property Object, which only allows the user to select dates before the specified date. Finally, the third usage sets both the rangeStart and rangeEnd values within the selectableRange property Object which allows you to limit the selectable dates to a certain range.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/12/17/setting-selectable-ranges-in-the-flex-datefield-control/ -->
<mx:Application name="DateField_selectableRange_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white">
 
    <mx:Form>
        <mx:FormItem label="rangeStart only:">
            <mx:DateField id="dateField1"
                    showToday="false"
                    selectableRange="{{rangeStart:new Date()}}" />
        </mx:FormItem>
        <mx:FormItem label="rangeEnd only:">
            <mx:DateField id="dateField2"
                    showToday="false"
                    selectableRange="{{rangeEnd:new Date()}}" />
        </mx:FormItem>
        <mx:FormItem label="rangeStart/rangeEnd:">
            <mx:DateField id="dateField3"
                    showToday="false"
                    selectableRange="{{rangeStart:new Date(2007, 11, 3),
                                      rangeEnd:new Date(2007,11,28)}}" />
        </mx:FormItem>
    </mx:Form>
 
</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2007/12/17/setting-selectable-ranges-in-the-flex-datefield-control/feed/ 12 Calculating the number of days between two selected dates in a DateChooser control http://blog.flexexamples.com/2007/07/31/calculating-the-number-of-days-between-two-selected-dates-in-a-datechooser-control/ http://blog.flexexamples.com/2007/07/31/calculating-the-number-of-days-between-two-selected-dates-in-a-datechooser-control/#comments Wed, 01 Aug 2007 04:54:09 +0000 Peter deHaan http://blog.flexexamples.com/2007/07/31/calculating-the-number-of-days-between-two-selected-dates-in-a-datechooser-control/ Here’s a marginally more interesting sample. I was playing around with the DateChooser (calendar) control and the selectableRange property and figured I’d make a simple application to calculate the differences between two selected dates. The example creates a selectable range of dates from the current date to current date plus 1 year. Users can select [...]]]> Here’s a marginally more interesting sample. I was playing around with the DateChooser (calendar) control and the selectableRange property and figured I’d make a simple application to calculate the differences between two selected dates. The example creates a selectable range of dates from the current date to current date plus 1 year. Users can select any single or range of dates between the start date and end date, and Flex calculates the number of days the user selected using some basic math.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application name="DateChooser_selectableRange_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    <mx:Script>
        <![CDATA[
            import mx.controls.dataGridClasses.DataGridColumn;
 
            /* Number of milliseconds in a day. (1000 milliseconds per second * 60 seconds per minute * 60 minutes per hour * 24 hours per day) */
            private const MS_PER_DAY:uint = 1000 * 60 * 60 * 24;
 
            [Bindable]
            private var startDate:Date = new Date();
 
            [Bindable]
            private var endDate:Date = new Date(startDate.fullYear + 1, startDate.month, startDate.date);
 
            /* Default label function for the DataGrid. Basically just calls the DateFormatter on the current column's contents. */
            private function cellDateFormatter(item:Object, column:DataGridColumn):String {
                var columnDataField:String = column.dataField;
                return dateFormatter.format(item[columnDataField]);
            }
 
            /* Custom label function for the last column. Calculates the number of days between the start date and end date. */
            private function calculateDays(item:Object, column:DataGridColumn):String {
                var tempDate:Date = new Date(item.rangeEnd - item.rangeStart);
                return Math.round((tempDate.time / MS_PER_DAY) + 1).toString();
            }
        ]]>
    </mx:Script>
 
    <mx:DateFormatter id="dateFormatter" formatString="MMM D, YYYY" />
 
    <mx:HBox>
        <mx:DateChooser id="dateChooser" selectableRange="{{rangeStart:startDate, rangeEnd:endDate}}" allowMultipleSelection="true" />
 
        <mx:DataGrid id="selDates" dataProvider="{dateChooser.selectedRanges}" labelFunction="cellDateFormatter" verticalScrollPolicy="on" height="{dateChooser.height}">
            <mx:columns>
                <mx:DataGridColumn dataField="rangeStart" headerText="Range Start:" />
                <mx:DataGridColumn dataField="rangeEnd" headerText="Range End:" />
                <mx:DataGridColumn labelFunction="calculateDays" headerText="Number Days:" />
            </mx:columns>
        </mx:DataGrid>
    </mx:HBox>
 
</mx:Application>

View source enabled in the following example.

 
]]> http://blog.flexexamples.com/2007/07/31/calculating-the-number-of-days-between-two-selected-dates-in-a-datechooser-control/feed/ 26