3 Replies Latest reply on May 20, 2011 8:11 AM by Carol L. Frampton

    Datefield Selectable range

    kilyas2007 Level 1

      I am using a date field where everymonth I want to put a few dates that are selctable:-

       

      <?xml version="1.0"?>

      <!-- controls\date\DateChooserDisabledOption.mxml -->

      <mx:Application

       

       

      xmlns:mx="http://www.adobe.com/2006/mxml">

       

       

       

       

      <mx:DateField selectableRange="{ new Date(2010,0,8),new Date(2010,0,9),new Date(2010,0,18) }" showToday="true" disabledDays="[0,6]"/>

      </mx:Application>

       

      The problem is that with his code only the last date, in this case Jan 18th appears to be selectable while not the others.  How can I make more than one date selectable?  Specially if they are not in a range and are random separated dates

        • 1. Re: Datefield Selectable range
          Jason Szeto Level 3

          Kilyas,

           

          You can use the selectedRanges property.

           

          From the ASDoc:

           

          Selected date ranges.

          This property accepts an Array of objects as a parameter.       Each object in this array has two date Objects,       rangeStart and rangeEnd.       The range of dates between each set of rangeStart and rangeEnd (inclusive) are selected.       To select a single day, set both rangeStart and rangeEnd to the same date. Time values are zeroed out from the Date        object if they are present.

           

          The following example, selects the following dates: January 11       2006, the range January 23 - February 10 2006.

           

          selectedRanges="{[ {rangeStart: new Date(2006,0,11),       rangeEnd: new Date(2006,0,11)}, {rangeStart:new Date(2006,0,23),       rangeEnd: new Date(2006,1,10)} ]}"

           

          The default value is [].

          This property can be used as the source for data binding. When this property is modified, it dispatches the  valueCommit event.

           

          Jason

          • 2. Re: Datefield Selectable range
            Michael Orzechowski Level 1

            Its seems like an awfully old post but I am facing same problem at the moment so I thought I will put in my 2 cents to the discussion;)

             

            Jason, what you wrote is not true I am afraid. Property selectableRange of DateField expects object and not an array. In other words it will only work with singular date range.

             

            I am currently working on a tool where I need to limit date selection on DateField. Basically user will select some task on drop down and type of the task (assignment) should restrict possible entries on DateField component. I am no stranger to using property selectableRange but sadly it does not work with multiple ranges:(

             

            I would not like to try and change standard Flex code (DateChooser.as for instance) to achieve that as I don’t want to be bothered with re-doing these bits when upgrading (migrating to newer Flex or whatnot).

             

            kilyas2007, I would suggest doing the following:

                

                 1) Merge your date ranges into one (from lowest to highest value)
                 2) Disable unwanted dates in between using disabledRanges property (this is an array parameter thankfully)

             

            Perhaps someone knows a better way to do it?

             

            Regards
            Michael

            • 3. Re: Datefield Selectable range
              Carol L. Frampton Level 2

              This isn't pretty but this will only allow May 2-4 and May 20-24 to be selected.  Remember that months start at 0.

               

                  <mx:DateChooser id="dateChooser"
                                  allowDisjointSelection="true"
                                  allowMultipleSelection="true"
                                  showToday="true"
                                  displayedMonth="4"
                                  disabledRanges="{[
                                      {rangeEnd: new Date(2011,4,1)},
                                      {rangeStart: new Date(2011,4,5), rangeEnd: new Date(2011,4,19)},
                                      {rangeStart: new Date(2011,4,25)}
                                      ]}"/>