DateChooser.. disable year and month?

Question

I want a to user a DateChooser to allow a user to select a date in a given month and year. I want to set the month and year programmatically and only allow the user to select the date/day.

I can do this for the year easily by setting the minYear and maxYear to whatever year I want, but I am not seeing a strait forward way of disallowing the user to select a different month?

Answer 1

Here is how you disable the month selection arrows...a total CSS hack!!

nextMonthUpSkin: ClassReference('mx.skins.Border');
nextMonthDisabledSkin: ClassReference('mx.skins.Border');
nextMonthDownSkin: ClassReference('mx.skins.Border');
nextMonthOverSkin: ClassReference('mx.skins.Border');
prevMonthUpSkin: ClassReference('mx.skins.Border');
prevMonthDisabledSkin: ClassReference('mx.skins.Border');
prevMonthDownSkin: ClassReference('mx.skins.Border');
prevMonthOverSkin: ClassReference('mx.skins.Border');   

I apologize for not seeing this question in August. But I recently (yesterday) had the same problem and found this solution...cheers.

Answer 2

As mentioned by JabbyPanda, you could extend the DateChooser control. With little extra work you can get an ideal and more reusable implementation, but let's stick to simplicity here. So, all you need to do is to remove both fwdMonthButton and backMonthButton, or hide them by setting the visible property to false. For example:

import mx.controls.DateChooser;
import mx.core.mx_internal;
use namespace mx_internal;

public class MyDateChooser extends DateChooser
{
    override protected function createChildren():void {
        super.createChildren();
        // Remove them:
        this.removeChild(this.mx_internal::fwdMonthButton);
        this.removeChild(this.mx_internal::backMonthButton);
        // Or just hide them:
        //this.mx_internal::fwdMonthButton.visible = false; 
        //this.mx_internal::backMonthButton.visible = false;    
    }
}

Answer 3

mx:DateChooser out of the box allows only disabling of year navigation by public property "yearNavigationEnabled"

If you would like to disable month navigation too, you will have to extend from standard DateChooser component and implement "monthNavigationEnabled" functionality similar to existing "yearNavigationEnabled"

Answer 4

You could also use the selectableRange property and set rangeStart and rangeEnd appropriately. Example to only allow user to pick from Aug 1 2010 to Aug 15 2010:

selectableRange="{{rangeStart:new Date(2010,7,1), rangeEnd:new Date(2010,7,15)}}"

However, note it'll still show the month navigator arrows (though they're disabled). I'm not sure if there's an easy way to hide those.