Loading ...
Sorry, an error occurred while loading the content.

Calendar - Select range of dates

Expand Messages
  • jfasaldarriaga
    Hi :) Im trying to do this, when I write in a text input whit an onChange event this value will be renderer on the calendar, thats because I need insert ranges
    Message 1 of 4 , Sep 29, 2006
    • 0 Attachment
      Hi :) Im trying to do this, when I write in a text input whit an
      onChange event this value will be renderer on the calendar, thats
      because I need insert ranges of dates in the calendar but all this
      range needs to be in normal dates, 01/01/2006-01/20/2006 ->
      01/01/2006, 01/02/2006 ...

      This is my code:

      <html>
      <head>
      <script type="text/javascript" src="build/yahoo/yahoo.js"></script>
      <script type="text/javascript" src="build/event/event.js"></script>
      <script type="text/javascript" src="build/dom/dom.js"></script>
      <script type="text/javascript" src="build/calendar/calendar.js"></script>
      <link type="text/css" rel="stylesheet"
      href="build/calendar/assets/calendar.css">
      <script language="javascript">
      var cal1;
      function init() {
      cal1 = new YAHOO.widget.Calendar("cal1","cal1Container");
      cal1.Options.MULTI_SELECT = true;
      /*var customConfig = function() {
      this.Options.MULTI_SELECT = true;
      }

      cal1.setChildFunction("customConfig", customConfig);
      cal1.callChildFunction("customConfig");*/

      cal1.render();
      }
      </script>
      </head>
      <body onload="init()">
      <input type="text" name="program_dates" id="program_dates"
      onChange="selectDates( this.value );"/>
      <script type="text/javascript">
      function selectDates( value )
      {
      alert( "Value: " + value );
      cal1.addRenderer( value, init );
      }
      </script>
      <div id="cal1Container"></div>
      </body>
      </html>

      Any help will be apreciated. Thx.
    • jfasaldarriaga
      ... src= build/calendar/calendar.js ... Well, I guess my problem is resolved, I made this:
      Message 2 of 4 , Sep 29, 2006
      • 0 Attachment
        --- In ydn-javascript@yahoogroups.com, "jfasaldarriaga"
        <jfasaldarriaga@...> wrote:
        >
        > Hi :) Im trying to do this, when I write in a text input whit an
        > onChange event this value will be renderer on the calendar, thats
        > because I need insert ranges of dates in the calendar but all this
        > range needs to be in normal dates, 01/01/2006-01/20/2006 ->
        > 01/01/2006, 01/02/2006 ...
        >
        > This is my code:
        >
        > <html>
        > <head>
        > <script type="text/javascript" src="build/yahoo/yahoo.js"></script>
        > <script type="text/javascript" src="build/event/event.js"></script>
        > <script type="text/javascript" src="build/dom/dom.js"></script>
        > <script type="text/javascript"
        src="build/calendar/calendar.js"></script>
        > <link type="text/css" rel="stylesheet"
        > href="build/calendar/assets/calendar.css">
        > <script language="javascript">
        > var cal1;
        > function init() {
        > cal1 = new YAHOO.widget.Calendar("cal1","cal1Container");
        > cal1.Options.MULTI_SELECT = true;
        > /*var customConfig = function() {
        > this.Options.MULTI_SELECT = true;
        > }
        >
        > cal1.setChildFunction("customConfig", customConfig);
        > cal1.callChildFunction("customConfig");*/
        >
        > cal1.render();
        > }
        > </script>
        > </head>
        > <body onload="init()">
        > <input type="text" name="program_dates" id="program_dates"
        > onChange="selectDates( this.value );"/>
        > <script type="text/javascript">
        > function selectDates( value )
        > {
        > alert( "Value: " + value );
        > cal1.addRenderer( value, init );
        > }
        > </script>
        > <div id="cal1Container"></div>
        > </body>
        > </html>
        >
        > Any help will be apreciated. Thx.
        >

        Well, I guess my problem is resolved, I made this:

        <input type="text" name="program_dates" id="program_dates"
        onChange="selectDates( this.value );"/>
        <script type="text/javascript">
        function selectDates( value )
        {
        alert( "Value: " + value );
        cal1.select( value );
        cal1.render();
        alert( "Dates: " + cal1.getSelectedDates() );
        }
        </script>

        So, now all the dates on the input were selected by the calendar, now
        I need to return this selected dates with this format: MM/DD/YYYY,
        somebody know how to do this ?

        Thx.
      • dav.glass@yahoo.com
        getSelectedDates returns an array of JavaScript Date objects. Here is a general parsing idea: var calDate = cal1.getSelectedDates(); var calDateStr = ; for
        Message 3 of 4 , Sep 29, 2006
        • 0 Attachment
          getSelectedDates returns an array of JavaScript Date objects.
          Here is a general parsing idea:
          var calDate = cal1.getSelectedDates();
          var calDateStr = '';
          for (var i = 0; i < calDate.length; i++) {
          calDateStr = calDateStr + ' ' +
          (calDate[i].getMonth() + 1) +
          '/' + calDate[i].getDate() +
          '/' + calDate[i].getFullYear(); // This will format the date as mm/dd/YYYY
          }
          FORM_FIELD.value = calDateStr; //Set the form field value to the resulting string

          You can see an example here:
          http://blog.davglass.com/files/yui/cal2/
           
          Hope that helps...

          Dav Glass
          dav.glass@...
          davglass.com
          618.694.3476

          + Windows: n. - The most successful computer virus, ever. +
          + A computer without a Microsoft operating system is like a dog
          without bricks tied to its head +
          + A Microsoft Certified Systems Engineer is to computing what a
          McDonalds Certified Food Specialist is to fine cuisine +


          ----- Original Message ----
          From: jfasaldarriaga <jfasaldarriaga@...>
          To: ydn-javascript@yahoogroups.com
          Sent: Friday, September 29, 2006 7:36:06 AM
          Subject: [ydn-javascript] Re: Calendar - Select range of dates

          --- In ydn-javascript@ yahoogroups. com, "jfasaldarriaga"
          <jfasaldarriaga@ ...> wrote:

          >
          > Hi :) Im trying to do this, when I write in a text input whit an
          > onChange event this value will be renderer on the calendar, thats
          > because I need insert ranges of dates in the calendar but all this
          > range needs to be in normal dates, 01/01/2006-01/ 20/2006 ->
          > 01/01/2006, 01/02/2006 ...
          >
          > This is my code:
          >
          > <html>
          > <head>
          > <script type="text/javascri pt" src="build/yahoo/ yahoo.js" ></script>
          > <script type="text/javascri pt" src="build/event/ event.js" ></script>
          > <script type="text/javascri pt" src="build/dom/ dom.js">< /script>
          > <script type="text/javascri pt"
          src="build/calendar /calendar. js"></script>
          > <link type="text/css" rel="stylesheet"
          > href="build/ calendar/ assets/calendar. css">
          > <script language="javascrip t">
          > var cal1;
          > function init() {
          > cal1 = new YAHOO.widget. Calendar( "cal1","cal1Cont ainer");
          > cal1.Options. MULTI_SELECT = true;
          > /*var customConfig = function() {
          > this.Options. MULTI_SELECT = true;
          > }
          >
          > cal1.setChildFuncti on("customConfig ", customConfig) ;
          > cal1.callChildFunct ion("customConfi g");*/
          >
          > cal1.render( );
          > }
          > </script>
          > </head>
          > <body onload="init( )">
          > <input type="text" name="program_ dates" id="program_ dates"
          > onChange="selectDat es( this.value );"/>
          > <script type="text/javascri pt">
          > function selectDates( value )
          > {
          > alert( "Value: " + value );
          > cal1.addRenderer( value, init );
          > }
          > </script>
          > <div id="cal1Container" ></div>
          > </body>
          > </html>
          >
          > Any help will be apreciated. Thx.
          >

          Well, I guess my problem is resolved, I made this:

          <input type="text" name="program_ dates" id="program_ dates"
          onChange="selectDat es( this.value );"/>
          <script type="text/javascri pt">
          function selectDates( value )
          {
          alert( "Value: " + value );
          cal1.select( value );
          cal1.render( );
          alert( "Dates: " + cal1.getSelectedDat es() );
          }
          </script>

          So, now all the dates on the input were selected by the calendar, now
          I need to return this selected dates with this format: MM/DD/YYYY,
          somebody know how to do this ?

          Thx.


        • jfasaldarriaga
          Thx for your answer, it help me a lot :), now I set up the Calendar2Up, but when I made clear() I got the same month on the two calendar panels, it is a bug ?
          Message 4 of 4 , Sep 29, 2006
          • 0 Attachment
            Thx for your answer, it help me a lot :), now I set up the
            Calendar2Up, but when I made clear() I got the same month on the two
            calendar panels, it is a bug ?

            This is the code:

            <input type="button" value="Deselect All" name="deselect"
            style="margin-left: 10px;" onClick="deSelect();" />

            <script type="text/javascript">
            function deSelect()
            {
            cal1.clear();
            //cal1.render();
            }
            </script>

            --- In ydn-javascript@yahoogroups.com, <dav.glass@...> wrote:
            >
            > getSelectedDates returns an array of JavaScript Date objects.
            > Here is a general parsing idea:
            > var calDate = cal1.getSelectedDates();
            > var calDateStr = '';
            > for (var i = 0; i < calDate.length; i++) {
            > calDateStr = calDateStr + ' ' +
            > (calDate[i].getMonth() + 1) +
            > '/' + calDate[i].getDate() +
            > '/' + calDate[i].getFullYear(); // This will format the date as
            mm/dd/YYYY
            > }
            > FORM_FIELD.value = calDateStr; //Set the form field value to the
            resulting string
            >
            > You can see an example here:
            > http://blog.davglass.com/files/yui/cal2/
            >
            > Hope that helps...
            >
            >
            > Dav Glass
            > dav.glass@...
            > davglass.com
            > 618.694.3476
            >
            > + Windows: n. - The most successful computer virus, ever. +
            > + A computer without a Microsoft operating system is like a dog
            > without bricks tied to its head +
            > + A Microsoft Certified Systems Engineer is to computing what a
            > McDonalds Certified Food Specialist is to fine cuisine +
            >
            > ----- Original Message ----
            > From: jfasaldarriaga <jfasaldarriaga@...>
            > To: ydn-javascript@yahoogroups.com
            > Sent: Friday, September 29, 2006 7:36:06 AM
            > Subject: [ydn-javascript] Re: Calendar - Select range of dates
            >
            > --- In ydn-javascript@ yahoogroups. com,
            "jfasaldarriaga"
            > <jfasaldarriaga@ ...> wrote:
            > >
            > > Hi :) Im trying to do this, when I write in a text input whit an
            > > onChange event this value will be renderer on the calendar, thats
            > > because I need insert ranges of dates in the calendar but all this
            > > range needs to be in normal dates, 01/01/2006-01/ 20/2006 ->
            > > 01/01/2006, 01/02/2006 ...
            > >
            > > This is my code:
            > >
            > > <html>
            > > <head>
            > > <script type="text/javascri pt" src="build/yahoo/ yahoo.js"
            ></script>
            > > <script type="text/javascri pt" src="build/event/ event.js"
            ></script>
            > > <script type="text/javascri pt" src="build/dom/ dom.js">< /script>
            > > <script type="text/javascri pt"
            > src="build/calendar /calendar. js"></script>
            > > <link type="text/css" rel="stylesheet"
            > > href="build/ calendar/ assets/calendar. css">
            > > <script language="javascrip t">
            > > var cal1;
            > > function init() {
            > > cal1 = new YAHOO.widget. Calendar( "cal1","cal1Cont ainer");
            > > cal1.Options. MULTI_SELECT = true;
            > > /*var customConfig = function() {
            > > this.Options. MULTI_SELECT = true;
            > > }
            > >
            > > cal1.setChildFuncti on("customConfig ", customConfig) ;
            > > cal1.callChildFunct ion("customConfi g");*/
            > >
            > > cal1.render( );
            > > }
            > > </script>
            > > </head>
            > > <body onload="init( )">
            > > <input type="text" name="program_ dates" id="program_ dates"
            > > onChange="selectDat es( this.value );"/>
            > > <script type="text/javascri pt">
            > > function selectDates( value )
            > > {
            > > alert( "Value: " + value );
            > > cal1.addRenderer( value, init );
            > > }
            > > </script>
            > > <div id="cal1Container" ></div>
            > > </body>
            > > </html>
            > >
            > > Any help will be apreciated. Thx.
            > >
            >
            > Well, I guess my problem is resolved, I made this:
            >
            > <input type="text" name="program_ dates" id="program_ dates"
            > onChange="selectDat es( this.value );"/>
            > <script type="text/javascri pt">
            > function selectDates( value )
            > {
            > alert( "Value: " + value );
            > cal1.select( value );
            > cal1.render( );
            > alert( "Dates: " + cal1.getSelectedDat es() );
            > }
            > </script>
            >
            > So, now all the dates on the input were selected by the calendar, now
            > I need to return this selected dates with this format: MM/DD/YYYY,
            > somebody know how to do this ?
            >
            > Thx.
            >
          Your message has been successfully submitted and would be delivered to recipients shortly.