Setting selectable ranges in the Flex DateField control

By Peter deHaan On December 17, 2007 · 12 Comments

The following example shows the various usages of the selectableRange property for the DateField control in Flex.

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 name="DateField_selectableRange_test"
        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.

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.

12 Responses to Setting selectable ranges in the Flex DateField control

Raul Riera says:

December 17, 2007 at 10:36 pm

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?

Reply
ysbostan says:

February 15, 2008 at 9:31 pm

Nice! very thanx

Reply
News says:

April 5, 2008 at 11:42 pm

peterd – It’s helpfull, thanks

Reply
Nate says:

May 21, 2008 at 1:24 pm

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.

Reply
Nate says:

May 23, 2008 at 10:25 am

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>
```
Reply
- naidu says:
  
  June 13, 2011 at 1:05 pm
  
  nice one. what if i want to display for one month time stamp(taking the latest date(coming from database) as end date ). it should be dynamic.
  
  Reply
Pargat says:

August 28, 2009 at 6:52 am

Thanks Peter. Great post.

Reply
Gunjan kumar says:

October 16, 2009 at 10:04 am

It’s helpfull.
Thanks Peter

Reply
Andi says:

March 11, 2010 at 2:19 am

Thanks!!!!!! It’s very helpfull!

Reply
Michael Liscio says:

July 21, 2010 at 8:12 am

This is an excellent example. However I notice one situation that is not covered here that I recently had to hanle in my code.
What if you want users to be only able to select dates within the last x amount of days in my case 60. You can’t set the start date to a specific date sense the start date will increase by 1 each day. In that case the following code will work

selectableRange=”{{rangeStart:new Date(new Date().getTime() – 5184000000), rangeEnd:new Date()}}”

notice the use of the getTime method in the start date means that you have to know how many miliseconds have passed in the past x days
x * 24(60(60(1000)))
where x is the number of days you are looking for

Reply
- Peter deHaan says:
  
  July 21, 2010 at 10:06 am
  
  @Michael Liscio,
  
  Great tip, thanks! Also, you can probably do something similar to the following:
  <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" initialize="init();"> <mx:Script> <![CDATA[ protected function init():void { var endDate:Date = new Date(); var startDate:Date = new Date(endDate.time); startDate.date -= 30; sDateLbl.text = "start date: " + startDate.toDateString(); eDateLbl.text = "end date: " + endDate.toDateString(); } ]]> </mx:Script> <mx:Label id="sDateLbl" /> <mx:Label id="eDateLbl" /> </mx:Application>
  Peter
  
  Reply
Tahir Alvi says:

December 1, 2011 at 8:42 am

Hi,

If i want to enable only working days in calendars, then how i do that?

Thanks

Reply