Calculating the number of days between two selected dates in a DateChooser control

By Peter deHaan On July 31, 2007 · 26 Comments

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.

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.

Visit Authors Website →

Add Widgets (Content Sidebar)

This is your Content Sidebar. Edit this content that appears here in the widgets panel by adding or removing widgets in the Content Sidebar area.

26 Responses to Calculating the number of days between two selected dates in a DateChooser control

Odo says:

August 1, 2007 at 1:09 am

Hmm…this do not work. It only reports 1 day for every selection !
- geon says:
  
  March 22, 2010 at 2:09 am
  
  pls press date with shift key…
peterd says:

August 1, 2007 at 5:37 am

Odo,

Hold down the Shift key.
Odo says:

August 1, 2007 at 7:01 am

Ok thnx :) That works.
Sandeep says:

August 3, 2007 at 9:36 pm

how do u select the range here.
peterd says:

August 3, 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.
Sergey says:

November 20, 2007 at 8:36 am

How its working?
libran says:

March 19, 2008 at 11:16 pm

good！^_^
Rhoby says:

April 29, 2008 at 3:20 am

Bonjour,

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

peterd says:

April 29, 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

Rhoby says:

April 30, 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
Anonymous says:

March 17, 2009 at 8:01 am

Hello Petered,

We are working with Flex Builder 3 and We need to select multiple days in a calendar
without pressing the Ctrl or Shift keys. Is it possible?

Thanks
Nate says:

March 24, 2009 at 10:11 am

Your example seems to demonstrate the same bug(?) I’m experiencing. When the selectableRange is defined on a DateChooser and allowMultipleSelection=”true”, the selectedRanges do not include the rangeStart. In fact, in your example (at least on my machine), you can’t even select a range that includes the rangeStart date. Anyone else experiencing this?
ABC says:

May 7, 2009 at 6:10 am

Is this suppose to display the date selected or find the range. I m confused.
Peter deHaan says:

May 7, 2009 at 8:19 am

ABC,

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.

Peter
flex_learner says:

June 4, 2009 at 6:10 am

Is it possible to show the selected value dynamically in date choosed control

Peter deHaan says:

June 4, 2009 at 8:06 am

flex_learner,

You could do something like the following, which will set the selected date to July 4, 1980 and then set the DateChooser control’s displayed month and year to that same date:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application name="DateChooser_selectedDate_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Date id="dat" fullYear="1980" month="6" date="4" />

    <mx:DateChooser id="dateChooser"
            selectedDate="{dat}"
            displayedYear="{dat.fullYear}"
            displayedMonth="{dat.month}" />

</mx:Application>

The previous code will give a couple of binding warnings saying:
(a) Data binding will not be able to detect assignments to “fullYear”.
(b) Data binding will not be able to detect assignments to “month”.

The example still works, but if you don’t like those warnings, you could always set the properties using ActionScript instead, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application name="DateChooser_selectedDate_test"
        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 {
                var selDat:Date = dateChooser.selectedDate;
                dateChooser.displayedYear = selDat.fullYear;
                dateChooser.displayedMonth = selDat.month;
            }
        ]]>
    </mx:Script>

    <mx:DateChooser id="dateChooser"
            change="dateChooser_change(event);">
        <mx:selectedDate>
            <mx:Date fullYear="1980" month="6" date="4" />
        </mx:selectedDate>
    </mx:DateChooser>

    <mx:Button id="btn"
            label="Set new selectedDate"
            click="dateChooser.selectedDate = new Date(1976, 8, 9);" />

</mx:Application>

Peter

Jeremy Mitchell says:

April 1, 2010 at 4:06 pm

Peter,

why the need for Math.round?

return Math.round((tempDate.time / MS_PER_DAY) + 1).toString();

you’d think that item.rangeEnd & item.rangeStart wouldn’t have any time associated with it. but i have seen weird things where the difference in milliseconds between 2 dates is often not perfectly divisible by 1000 * 60 * 60 * 24. Which seems very odd…

jayanthi says:

May 26, 2010 at 5:34 am

public static const millisecondsPerDay:int = 1000 * 60 * 60 * 24;

I guess this will do

private function getDaysDifference(minDate:Date, maxDate:Date):uint
{
// for testing 
// var newDate:Date = new Date(2007,9,23); 
// var oldDate:Date = new Date (2007, 8, 23);
return Math.ceil(( minDate.getTime() - maxDate.getTime()) / millisecondsPerDay);
}

hector says:

March 17, 2011 at 12:58 pm

how can i implement the code suggested and return it to a for to use that value

Tahir Azeem Alvi says:

January 11, 2011 at 11:53 pm

Hi,

i have a problem face from last day.

The problem is that i want to run a countdown Timer. The timer is start from two dates
1. current date (as New Date()).
2. the immediate Monday (as new Date(“Mon Jan 17 2011″))

The problem is with 2nd date.

How i dynamically find the next Monday date ?.

Thanks and welcome for Help.
- Peter deHaan says:
  
  January 11, 2011 at 11:57 pm
  
  You should just be able to add 7 days to the second date.
  
  Peter
  - Tahir Azeem Alvi says:
    
    January 18, 2011 at 9:49 pm
    
    Thanks Peter.
    
    And if i want to get always UTC time on my PC or another PC in which my app is run, What i do that for this ?
  - Peter deHaan says:
    
    January 18, 2011 at 10:21 pm
    
    Look in to the various Date getUTC*() type functions:
    http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/Date.html#getUTCDate()
    
    Also, there is a static Date.UTC() method which may help.
    
    Peter
Marc Hughes says:

August 21, 2011 at 6:31 am

Not every day is 1000 * 60 * 60 * 24 milliseconds long.

In EST we have 2 days a year that are 23 and 25 hours long to account for daylight savings time.
chinmay says:

October 28, 2011 at 10:08 pm

hey could you tell me how to find the number of days between two dates using both datefield and datechooser also BindingUtils.bindProperty should be used.