Flex Examples

The following examples show how you can set a minimum and maximum allowable year in the Flex DateChooser control by setting the minYear and maxYear properties.

Full code after the jump.

The following example sets the maximum year to the current year, preventing you from using the month-based or year-based navigation to advance to future years (but future months within the same year are allowed):

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/05/04/setting-a-minimum-and-maximum-allowable-year-in-the-datechooser-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:DateChooser id="dateChooser"
            yearNavigationEnabled="true"
            initialize="dateChooser.maxYear = new Date().fullYear;" />

</mx:Application>

View source is enabled in the following example.

The following example sets the minimum year to the current year, preventing you from using the month-based or year-based navigation to advance to previous years (but previous months within the same year are allowed). Also, a disabled range is set up using the disabledRanges property which specifies a rangeEnd value of the current date, preventing users from selecting any days prior to today:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/05/04/setting-a-minimum-and-maximum-allowable-year-in-the-datechooser-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:DateChooser id="dateChooser"
            yearNavigationEnabled="true"
            initialize="dateChooser.minYear = new Date().fullYear;"
            disabledRanges="{[{rangeEnd:new Date()}]}" />

</mx:Application>

View source is enabled in the following example.