Sunday, January 20, 2008

Extending DateChooser.selectableRange to accept multiple values/ranges

Recently I came across the following requirement: Enable few disjoint dates in a DateChooser for user selection. The default DateChooser.selectableRange does not allow inserting of list of dates. It takes only a range and disables the rest.

I copied and modified the Flex 2 DateChooser control to achive the new functionlity. The swc is available here

I used this file to do the testing. I have done basic testing and it seems to work.

Only few dates in Jan, Feb and March of 2008 are enabled and it restircts the navigation to only those months

Currently I have made changes to only Flex 2 DateChooser. I would be happy to fix any bugs found !

Here are the Flex 3 files: DateChooser and CalenderLayout. The project source to build a Flex3Ex SWC which contains the modified code for DateChooser and CalendarLayout can be found here.


bogdan said...

Could you please prepare a Flex3 version? Thank you.

Sreenivas said...

I have posted the links to Flex 3 files.

bogdan said...

Wow that was quick. thanks

Arun said...

Seenivas, I"m in bangalore working for Symphony Services. I'm new to flex. We have requirement where we need DateChooser which has each days background color different. I hope you can help me out in this regard.Please kindly drop a blank mail & contact number to I will contact you.

arun prashad said...

i have from a an array of date objects and set the selected ranges to that array.and i have added the swc file given by you in "flex build path library as merged into code".still it is not working for me..pls explain me how to reach this

Kemet said...

it works, thank you la.
it took us hours to deal figure it out.
arun prashad
you should try putting the swc file that is in the bin file of the project inside the library path of your flex project.

Babu said...

Is it possible to send multiple date ranges instead of passing multiple single dates to selectableRange?. I am looking for something similar to what disableRanges accepts for selectableRange. Any suggestions on how to go about?.

Sreenivas said...

I think that is already supported. Pass an object with start and end dates with required property names. Please refer to help on selectableRange.

Babu said...

Adobe's implementation supports only one range(one start and one end) for selectablerange and it doesn't accept an array of date ranges. Anyway, I had to change Calendalayout and Datechooser to support this. I have just followed your approach for supporting series of single date array. Thank you for sharing your effort on this. It really helped me resolve it faster.

Sreenivas said...

I didn't mean that adobe version supports it. I meant to say that the version I have created might be supporting this. (I have not verified it).

Nathan J said...

Hi, Do you know how to make individual dates on the datechoosers background colors different?
Would help me out imensly.

Sreenivas said...

You can get into the CalenderLayout component and see how the background colors are being drawn. Customize it to suite your need.

Abhishek said...


First, thanks for writing this excellent component.

Second, I wanted to report an issue and am hoping you can hep fix.

I use the DateChooser and bind an array for time values for selectableRange. The value of the dates array changes based on various actions on the UI. Since the Datechooser is bound to the array, the updates reflect immediately.

Here is the issue, as far as the array contains dates, which fall in the current month the Datechooser works fine. Now, If the array contains dates in the previous month, the DateChooser seems to hold on to the previous values. On the UI it does not refresh for the current month. Only if you manually navigate back to the month with the dates, the Datechooser refreshes.

Can you please look into this? Please feel free to email me directly for more details.

Abhishek said...

Another piece of info. When you navigate backwards to the month with the date (from the array), the DateChooser disables the UI to navigate forward, which makes sense as other dates are disabled.

However the fix should do that automatically.

Rani said...


i want to display set of radio buttons on each date cell of date chooser component.

Could you please come up,

thanks in advance.