31
Jul
07

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 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.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 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.


10 Responses to “Calculating the number of days between two selected dates in a DateChooser control”


  1. 1 Odo Aug 1st, 2007 at 1:09 am

    Hmm…this do not work. It only reports 1 day for every selection !

  2. 2 peterd Aug 1st, 2007 at 5:37 am

    Odo,

    Hold down the Shift key.

  3. 3 Odo Aug 1st, 2007 at 7:01 am

    Ok thnx :) That works.

  4. 4 Sandeep Aug 3rd, 2007 at 9:36 pm

    how do u select the range here.

  5. 5 peterd Aug 3rd, 2007 at 10:00 pm

    Sandeep,

    Try clicking on Aug 6th, pressing the Shift key, and then pressing on Aug 22nd.
    It should highlight each of the days between the two dates, set the range, and list the number of days as 17.

    If you press the Ctrl key, I believe it selects each day individually instead of as a range/series.

  6. 6 Sergey Nov 20th, 2007 at 8:36 am

    How its working?

  7. 7 libran Mar 19th, 2008 at 11:16 pm

    good!^_^

  8. 8 Rhoby Apr 29th, 2008 at 3:20 am

    Bonjour,

    How to loop for each day between 2 dates ?
    thanks you very much.

  9. 9 peterd Apr 29th, 2008 at 12:18 pm

    Rhoby,

    I’m sure there is a better, more efficient way, but maybe this helps:

    <?xml version="1.0" encoding="utf-8"?>
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
            layout="vertical"
            verticalAlign="middle"
            backgroundColor="white">
    
        <mx:Script>
            <![CDATA[
                import mx.events.CalendarLayoutChangeEvent;
                import mx.utils.ObjectUtil;
    
                private var msInDay:uint = 1000 * 60 * 60 * 24;
    
                private function dateChooser_change(evt:CalendarLayoutChangeEvent):void {
                    // textArea.text = ObjectUtil.toString(dateChooser.selectedRanges);
                    textArea.text = "";
                    if (dateChooser.selectedRanges.length > 0) {
                        var ranges:Object = dateChooser.selectedRanges[0];
                        var numDays:uint = (ranges.rangeEnd.time - ranges.rangeStart.time) / msInDay;
                        var idx:uint;
                        var retDate:Date;
                        for (idx = 0; idx <= numDays; idx++) {
                            retDate = new Date(ranges.rangeStart.time);
                            retDate.date += idx;
                            textArea.text += retDate.toDateString() + "n";
                        }
                    }
                }
            ]]>
        </mx:Script>
    
        <mx:DateChooser id="dateChooser"
                allowMultipleSelection="true"
                change="dateChooser_change(event);" />
    
        <mx:TextArea id="textArea"
                editable="false"
                selectable="false"
                width="320"
                height="240" />
    
    </mx:Application>
    

    Peter

  10. 10 Rhoby Apr 30th, 2008 at 3:30 am

    Hello Petered

    First, very big thank you for having responded …
    I never thought you were answering me still thank you very much
    This site told me everything about Flex and I hope with all my heart that will never end …
    This is the solution that I was looking for …
    You are the best, MANY THANKS

Leave a Reply

This blog is terrible at eating HTML tags. If you plan on posting code/XML, please escape your "<" characters as "&lt;" and your ">" characters as "&gt;".