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?

It sounds you will not require DateChooser from this requirement, simply populate a dropdown list of the days in the month and let the user select those? — Julius A, Aug 02 '10 at 14:31
You can do it, just look at my answer. Feel free to upvote it too :) — D3vtr0n, Oct 08 '10 at 19:03

score 2 · Accepted Answer · answered Sep 23 '10 at 19:55

2

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.

answered Sep 23 '10 at 19:55

D3vtr0n

2,774
3
33
53

+1 yes, I meant to test this out when you first posted it but got side tracked. I tested this today and it worked great. Thanks. – JD Isaacks Oct 08 '10 at 20:05
Sweet dude, glad it worked! I am not happy doing it this way, but I have 6 of these bad boys, full extended and color coding days, etc. Good luck! – D3vtr0n Oct 08 '10 at 22:00

score 2 · Answer 2 · edited May 23 '17 at 12:11

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

score 1 · Answer 3 · answered Aug 02 '10 at 16:18

1

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.

answered Aug 02 '10 at 16:18

dowens

11
2

^ yes there is an easy to hide those. look at my answer. – D3vtr0n Sep 23 '10 at 19:54

score 1 · Answer 4 · answered Aug 03 '10 at 13:29

1

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"

answered Aug 03 '10 at 13:29

JabbyPanda

872
5
13

to properly fix the problem, yes you could extend. but why spend days,weeks, months re-inventing the wheel? use the CSS hack I posted. – D3vtr0n Sep 23 '10 at 19:56

DateChooser.. disable year and month?

4 Answers4