Search This Blog

2009-04-14

Calculate date difference between two selected days

How to calculate date difference in adobe flex,select multiple dates in the calender of adobe flex.
Flex calculates the number of days the user selected using some basic math


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





Output:



1 comment:

Unknown said...

Hi,
Current date could not be selected.