6 Replies Latest reply on Aug 25, 2009 7:33 AM by laxmidi

    How to Make the SelectableRange in a DateField Dynamic?

    laxmidi Level 1

      Hi,

       

      How do I make the SelectableRange in a DateField dynamic?

       

      I'd the user to select a date in the startDateSelector. Then, the endDateSelector's rangeEnd date would be 30 days after the selected start date.

       

      Is there a way to bind:

            a) the startDateSelector's selectedDate to the endDateSelector's rangeStart date

       

           b) and then bind the startDateSelector's selectedDate to the endDateSelector's range end date + 30 days?

       

      <mx:DateField id="startDateSelector"  x="20" y="57" selectableRange="{{rangeStart: new Date(2006,0,1), rangeEnd: new Date(2009,7,10) }}"  yearNavigationEnabled="true" />

       

      <mx:DateField  id="endDateSelector" x="20" y="113" selectableRange="{{rangeStart: new Date(2006,0,1), rangeEnd: new Date(2009,7,10) }}" yearNavigationEnabled="true" />

       

      Thank you!

       

      -Laxmidi

        • 1. Re: How to Make the SelectableRange in a DateField Dynamic?
          Virat Patel

          Hello

           

          As i understand your problem you need some specific range to select the date in DateField.

           

          Check this code, In this i have made dynamic selectrange as per starting date.

           

          User can only select date between some range like { starting date to starting date + 30 days }

           

          Range can be modify by changing day factor.

           

          May this help you.

           

          ///////////////////////// code ////////////////////////////////////////////////

           

          <?xml version="1.0" encoding="utf-8"?>
          <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
             
              <mx:Script>
                  <![CDATA[
                      // time for 30 days.. u can change as per your requirement
                      private var rangeTime : Number = 1000*60*60*24*30;
                     
                  ]]>
              </mx:Script>
             
              <mx:DateField id="start" />
              <mx:DateField id="end"
                  selectableRange="{{ rangeStart : start.selectedDate, rangeEnd : new Date( start.selectedDate.getTime() + rangeTime ) }}" />
                 
          </mx:Application>

           

          /////////////////////////////////////////////////////////////////

           

          With Regards

          Virat Patel

          • 2. Re: How to Make the SelectableRange in a DateField Dynamic?
            laxmidi Level 1

            Dear Virat,

             

            Awesome! Thank you so much for the help!

             

            I worked on this problem for several hours and I hadn't found a solution. I didn't know about the getTime() method.

             

            The code worked perfectly. Thank you.

             

            All the best,

            Laxmidi

            • 3. Re: How to Make the SelectableRange in a DateField Dynamic?
              laxmidi Level 1

              Virat,

               

              Thank you very much for the help. I've got one more question. I need to restrict the rangeEnd to a maximum of Aug 10, 2009. 

              I want the user to be able to select a date and the rangeEnd to be 30 days after that date. But in any case, the rangeEnd can not more than Aug. 10, 2009. Do you have any suggestions on how to do that?
              I've worked on it for a few hours without any success.
              Thank you!
              -Laxmidi
              • 4. Re: How to Make the SelectableRange in a DateField Dynamic?
                laxmidi Level 1

                I figured it out.  I wrote a function  as follows:

                 

                public function rangeFinder():void {

                if((start.selectedDate.getTime() + rangeTime) > 1249876800000){rangeTime = 1249876800000 - start.selectedDate.getTime()} else{rangeTime = 1000*60*60*24*30;}

                 

                }

                 

                 

                 

                All the best,

                Laxmidi

                • 5. Re: How to Make the SelectableRange in a DateField Dynamic?
                  Virat Patel Level 2

                  Hello Laxmidi

                   

                  Check this code

                   

                  ///////////////////////////////////////////////////////////////////////

                   

                  <?xml version="1.0" encoding="utf-8"?>
                  <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
                     
                      <mx:Script>
                          <![CDATA[
                              // time for 30 days.. u can change as per your requirement
                              private var rangeTime : Number = 1000*60*60*24*30;
                              [Bindable]
                              private var endDate : Date = new Date();
                             
                              public function rangeFinder():void
                              {
                                  // set your maximum limit of date;
                                  // for example i have set it 20th Sep 2009
                                  var tempDate : Date = new Date( 2009,8,20 );
                                  var tempNum : Number = start.selectedDate.getTime() + rangeTime;
                                  if( tempNum > tempDate.getTime() )
                                  {
                                      endDate = tempDate;
                                  }
                                  else
                                  {
                                      endDate = new Date( tempNum );
                                  }
                              }
                          ]]>
                      </mx:Script>
                     
                      <mx:DateField id="start" change="rangeFinder()" />
                      <mx:DateField id="end"
                          selectableRange="{{ rangeStart : start.selectedDate, rangeEnd : endDate }}" />
                         
                  </mx:Application>

                   

                  ///////////////////////////////////////////////////////////////////////////////////////

                   

                  With Regards

                  Virat Patel

                  1 person found this helpful
                  • 6. Re: How to Make the SelectableRange in a DateField Dynamic?
                    laxmidi Level 1

                    Thank you very much Virat for all your help. Very cool!

                     

                    Best,

                    Laxmidi