Jun 29

Flex的DateChooser控件中如何利用selectableRange属性计算选中两个日期间天数的例子

FlexAdd comments

接下来的例子演示了Flex的DateChooser控件中，如何利用selectableRange属性计算选中两个日期间天数。

让我们先来看一下Demo（可以右键View Source或点击这里察看源代码）：


下面是完整代码(或点击这里察看)：

Download: main.mxml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white">
  3.  
  4.     <mx:Script>
  5.         <![CDATA[
  6.             import mx.controls.dataGridClasses.DataGridColumn;
  7.  
  8.             /* Number of milliseconds in a day. (1000 milliseconds per second * 60 seconds per minute * 60 minutes per hour * 24 hours per day) */
  9.             private const MS_PER_DAY:uint = 1000 * 60 * 60 * 24;
  10.  
  11.             [Bindable]
  12.             private var startDate:Date = new Date();
  13.  
  14.             [Bindable]
  15.             private var endDate:Date = new Date(startDate.fullYear + 1, startDate.month, startDate.date);
  16.  
  17.             /* Default label function for the DataGrid. Basically just calls the DateFormatter on the current column's contents. */
  18.             private function cellDateFormatter(item:Object, column:DataGridColumn):String {
  19.                 var columnDataField:String = column.dataField;
  20.                 return dateFormatter.format(item[columnDataField]);
  21.             }
  22.  
  23.             /* Custom label function for the last column. Calculates the number of days between the start date and end date. */
  24.             private function calculateDays(item:Object, column:DataGridColumn):String {
  25.                 var tempDate:Date = new Date(item.rangeEnd - item.rangeStart);
  26.                 return Math.round((tempDate.time / MS_PER_DAY) + 1).toString();
  27.             }
  28.         ]]>
  29.     </mx:Script>
  30.  
  31.     <mx:DateFormatter id="dateFormatter" formatString="MMM D, YYYY" />
  32.  
  33.     <mx:HBox>
  34.         <mx:DateChooser id="dateChooser" selectableRange="{{rangeStart:startDate, rangeEnd:endDate}}" allowMultipleSelection="true" />
  35.  
  36.         <mx:DataGrid id="selDates" dataProvider="{dateChooser.selectedRanges}" labelFunction="cellDateFormatter" verticalScrollPolicy="on" height="{dateChooser.height}">
  37.             <mx:columns>
  38.                 <mx:DataGridColumn dataField="rangeStart" headerText="Range Start:" />
  39.                 <mx:DataGridColumn dataField="rangeEnd" headerText="Range End:" />
  40.                 <mx:DataGridColumn labelFunction="calculateDays" headerText="Number Days:" />
  41.             </mx:columns>
  42.         </mx:DataGrid>
  43.     </mx:HBox>
  44.  
  45. </mx:Application>
代码：Peter deHaan 翻译/整理/编译：minidxer

written by Minidxer  |  tags: , , , , ,

Leave a Reply