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

Re: Calendar - Select range of dates

Expand Messages
  • jfasaldarriaga
    ... src= build/calendar/calendar.js ... Well, I guess my problem is resolved, I made this:
    Message 1 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 2 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 3 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.