The following example shows the various usages of the selectableRange property for the DateField control in Flex.
Full code after the jump.
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 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.
{ 7 comments… read them below or add one }
Can this be set where the second datefield will only accept dates higher than the date selected in the first one? Does it support bindable data in that object you pass to the component?
Nice! very thanx
peterd – It’s helpfull, thanks
Is there a way to dynamically assign the rangeStart and rangeEnd? For instance, I’m using the DateField as the itemEditor in a DataGridColumn, and I need to be able to assign a selectableRange that isn’t hard coded.
Okay, I figured out how to assign a selectableRange that isn’t hard coded to a DateField that is used as an itemRenderer. The key piece I was missing was to use outerDocument to reference the object that would be used as the range:
<mx:Script> <![CDATA[ private var dateRange:Object = new Object(); dateRange["rangeStart"] = startDate; dateRange["rangeEnd"] = endDate; ]]> </mx:Script> ... <mx:DataGrid> <mx:columns> <mx:DataGridColumn> <mx:itemRenderer> <mx:Component> <mx:DateField selectableRange="{outerDocument.dateRange}" /> </mx:Component> </mx:itemRenderer> </mx:DataGridColumn> </mx:columns> </mx:DataGrid>Thanks Peter. Great post.
It’s helpfull.
Thanks Peter