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.

 
Tagged with:
 
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.

12 Responses to Setting selectable ranges in the Flex DateField control

  1. Raul Riera says:

    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?

  2. ysbostan says:

    Nice! very thanx

  3. News says:

    peterd – It’s helpfull, thanks

  4. Nate says:

    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.

  5. Nate says:

    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>
    
    • naidu says:

      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.

  6. Pargat says:

    Thanks Peter. Great post.

  7. Gunjan kumar says:

    It’s helpfull.
    Thanks Peter

  8. Andi says:

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

  9. Michael Liscio says:

    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

    • Peter deHaan says:

      @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

  10. Tahir Alvi says:

    Hi,

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

    Thanks

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

Anti-Spam Protection by WP-SpamFree