CODEWITHSUNDEEP
apache-flexflashactionscript-3flex3datechooser
JD Isaacks
JD Isaacks

Reputation: 57974

DateChooser.. disable year and month?

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?

Upvotes: 3

Views: 2365

Answers (4)

jweyrich
jweyrich

Reputation: 32240

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;    
    }
}

Upvotes: 2

D3vtr0n
D3vtr0n

Reputation: 2909

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.

Upvotes: 2

JabbyPanda
JabbyPanda

Reputation: 871

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"

Upvotes: 1

dowens
dowens

Reputation: 11

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.

Upvotes: 1

Related Questions