How to Validate a Date Range in Flex

Wednesday, May 27, 2009 05:27 PM by David Ortinau

I had the need to validate a date based on a range of allowed dates, and I couldn’t find this validation control anywhere for Flex. The reason is probably because it’s just so easy to write.

The solution is to write a custom validator that extends DateValidator, pass in the start and end dates, and then perform the validation. This way I can benefit from the nice inline validation Flex gives us.

The actual validation code to compare dates is based on the Date.parse() which you can see in the class code.

The class: DateRangeValidator.as

In my form I’ve been using a form validator that checks all the validation controls in the array and when it’s all good enables the form button. The Flex code for my form looks basically like this:

  1. <mx:Form>
  2. ... other fields ...
  3.             <mx:FormItem label="Date of Birth" required="true" labelStyleName="fieldLabel">
  4. 	    	<mx:DateField disabledRanges="{[ {rangeStart: new Date(1988,0,1), rangeEnd: new Date(2025,11,30)} ]}" id="dateOfBirth" yearNavigationEnabled="true" editable="true" formatString="MM/DD/YYYY" minYear="1900" maxYear="1988" change="this.formValidator.validateForm(event);"/>
  5. 	    </mx:FormItem>
  6. ... other fields ...
  7.             <mx:FormItem horizontalAlign="right" width="349">
  8. 	    	<mx:Button id="btnSubmit" click="submit()" label="NEXT"
  9. 				enabled="{this.formValidator.formIsValid}" />
  10. 	    </mx:FormItem>
  11. </mx:Form>

Then I have my array of validators:

  1. <mx:Array id="validators">
  2. ... some validators ...
  3. 	<validators:DateRangeValidator id="valDateRange" source="{dateOfBirth}" property="text" StartDate="{new Date(1900,0,1)}" EndDate="{new Date(1988,0,1)}" required="true"/>
  4. </mx:Array>

And the custom form validator that checks all fields to make sure it’s all valid before enabling the button. For more info on this, check out this article and code from Joel Hooks.

  1. <validators:FormValidator id="formValidator" validators="{this.validators}"/>

And that’s it. I hope this saves someone a little time. If you have any comments or improvements, please let me know.


General • Flex • Permalink
comments


another example using date validation
http://yasob.blogspot.com/2009/06/flex-custom-date-validation.html

Posted by Nash  on  06/07  at  02:15 PM

On line 38 of your code, should be read as < instead of ==

Posted by Mn  on  08/20  at  08:19 AM

I would like to thank you for the efforts you have made in writing this article. I am hoping the same best work from you in the future as well. In fact your creative writing abilities has inspired me to start my own BlogEngine blog now. Really the blogging is spreading its wings rapidly. Your write up is a fine example of it.

Posted by thyromine  on  02/09  at  04:33 PM

Great website. I think the whole concept behind the site is ingenious.

I also like the way you described applying overwhelming force to other areas of your life. Using this approach will guarantee success in any endeavor.
Jumping Castle

Posted by (JavaScript must be enabled to view this email address)  on  02/12  at  04:10 AM

You’re really thankful for this post, I’ve been really enjoying checking up your posts from time to time. Looking forward to see your future posts !!
wedding stubby holders

Posted by (JavaScript must be enabled to view this email address)  on  02/25  at  06:59 AM

Thank you so much for this new feature.  This is a great resource for us and the reviewers have done a great job of reviewing the product and writing their critiques!
stubby holders

Posted by (JavaScript must be enabled to view this email address)  on  02/28  at  07:23 AM

I have very pleased to see the article.Its funny but more then useful.So thanks.

Posted by dentists  on  03/07  at  08:05 AM

Shop prom dresses, formal dresses, prom shoes, 2010 designer prom gowns at PromGirl. Find homecoming,
cocktail dresses, graduation dresses,plus-size formal
Cheap Prom Dresses
Homecoming Dresses
on best wedding dresses for 2009 and 2010. You can find latest collection of woman’s dresses and casual dresses on this site

Posted by dress  on  09/15  at  01:00 AM

Abercrombie & Fitch store: discount Abercrombie Fitch clothing
cheap A & F clothes, outwears, sweaters, and other accessories for men and women
Abercrombie & Fitch
Abercrombie

Posted by xiaochen  on  09/16  at  02:52 AM

ICE BABES is an Importer, Manufacturer and Wholesaler of top quality ladies clothing based in the East End of London. We have been supplying independent retailers and boutiques in the U.K and throughout Europe for the last 20 years. With our in house designers we manufacture and source our ranges from proven suppliers in both the UK and Europe so we can always be sure of obtaining up to the minute designs. Our aim is to bring you value and quality with fast delivery, backed up with a reliable, knowledgeable & friendly service.

Posted by icebabes  on  08/22  at  07:59 AM

cheap hotels Edinburgh,and Edinburgh Airport Parking compares the parking rates and hotels in the Edinburgh City Edinburgh Airport and Long stay car Parking and short stay parking Edinburgh airport.

Posted by heathrow airport hotels  on  08/23  at  06:22 AM

I enthusiastically feel that the expertise specified is strongly related each of us . Many thanks .

Posted by Cicero Locksmith  on  08/25  at  04:23 AM

It is a useful blog to blog a talented writer, so I did a lot to learn.

Posted by Cheap Removalists  on  12/24  at  04:08 AM

Useful point of a blog or message by reading his blog you have hair that I did to you for the useful point

Posted by Removalists Melbourne  on  12/24  at  04:09 AM
Page 1 of 1 pages

Name:

Email:

Location:

URL:

Smileys

Remember my personal information

Notify me of follow-up comments?