2 Replies Latest reply on Apr 5, 2011 10:42 AM by Devtron

    Disable future dates in mx:DateField

    2009 Matt Level 1

      I'm using DateField for the birth input. How to not allow users to select a future date, the dates after today, in the DateField?

        • 1. Re: Disable future dates in mx:DateField
          Matt Le Fevre Level 4

          use disabledRanges

           

          eg:

           

          <mx:DateField disabledRanges="{[new Date(2009,10,20), 
                  {rangeStart: new Date(2009,10,20)}]}"/>
          

           

          will have 20th November 2009 onwards disabled

           

           

          all you need is a function to get the current date, set that to the rangeStart and tadaa.

           

           

           

          you could also use rangeEnd, but it's not really needed in your case as it allows for specific dates, for eg: here's from 20th Nov - 27th Nov disabled

           

          <mx:DateField disabledRanges="{[new Date(2009,10,20), 
                  {rangeStart: new Date(2009,10,20), rangeEnd: new Date(2009,10,27)}]}"/>

           

           

          but as you just need a single date onwards disabled, just ignore rangeEnd

          • 2. Re: Disable future dates in mx:DateField
            Devtron Level 3

            I had the need to disabled ranges beyond the current date.

             

            Here is how I solutioned it:

                                            <mx:DateField id="dfStartDate"
                                                name="Start Date"
                                                styleName="dateField"
                                                disabledRanges="{[getNextDayDate(),{rangeStart: getNextDayDate()}]}" />

             

                                            <mx:DateField id="dfEndDate"
                                                name="End Date"
                                                styleName="dateField"
                                                disabledRanges="{[getNextDayDate(),{rangeStart: getNextDayDate()}]}" />

             

             

             

             

             

                        private function getTomorrowDate():Date {
                            var myDate:Date = new Date()
                            myDate.date += 1; //increment date to tomorrow, so we can disable it in the picker controls
                            return myDate;
                        }