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

Button Control: Multiple Calendar Menu Button ????

Expand Messages
  • ntongoy
    This is a great example that demonstrates how to create a Menu Button whose Menu instance displays a Calendar. But the example is only for one calendar button.
    Message 1 of 1 , Mar 31, 2008
    • 0 Attachment
      This is a great example that demonstrates how to create a Menu Button whose Menu instance displays a Calendar. But the example is only for one calendar button. What if if I need multiple buttons and has to display different dates on each input boxes? I'm lost in the example code. Please show me how it is done. Thanks!

      Here is a link of what I was talking about.

      http://s255.photobucket.com/albums/hh126/alas_norberto/screenshots/?action=view&current=MultipleCalendar.jpg

      ****** CURRENT CODE ******

      YAHOO.util.Event.onDOMReady(function ()
          {
              // Create an Overlay instance to house the Calendar instance
              var oCalendarMenu = new YAHOO.widget.Overlay("calendarmenu");
              // Create a Button instance of type "menu"
              var oButton = new YAHOO.widget.Button({
                                                  type: "menu",
                                                  id: "calendarpicker",
                                                  label: "Choose A Date",
                                                  menu: oCalendarMenu,
                                                  container: "datefields" });
              /*
                  Add a "click" event listener that will render the Overlay, and
                  instantiate the Calendar the first time the Button instance is
                  clicked.
              */
              oButton.on("click", onButtonClick);
              function onButtonClick()
              {
                  /*
                      Create an empty body element for the Overlay instance in order
                      to reserve space to render the Calendar instance into.
                  */
                  oCalendarMenu.setBody(" ");
                  oCalendarMenu.body.id = "calendarcontainer";
                  // Render the Overlay instance into the Button's parent element
                  oCalendarMenu.render(this.get("container"));
                  // Align the Overlay to the Button instance
                  oCalendarMenu.align();
                  /*
                      Create a Calendar instance and render it into the body
                      element of the Overlay.
                  */
                  var oCalendar = new YAHOO.widget.Calendar("buttoncalendar", oCalendarMenu.body.id);
                  oCalendar.render();
                  /*
                      Subscribe to the Calendar instance's "changePage" event to
                      keep the Overlay visible when either the previous or next page
                      controls are clicked.
                  */
                  oCalendar.changePageEvent.subscribe(function ()
                  {
                      window.setTimeout(function ()
                      {
                          oCalendarMenu.show();
                      },     0);
                  });
                  /*
                      Subscribe to the Calendar instance's "select" event to
                      update the month, day, year form fields when the user
                      selects a date.
                  */
                  oCalendar.selectEvent.subscribe(function (p_sType, p_aArgs)
                  {
                      var aDate;
                      if (p_aArgs) {
                          aDate = p_aArgs[0][0];
                          var dateNocare = aDate[1] + "/" + aDate[2] + "/" + aDate[0];
                          YAHOO.util.Dom.get("nocare-field").value = dateNocare;
                          //YAHOO.util.Dom.get("month-field").value = aDate[1];
                          //YAHOO.util.Dom.get("day-field").value = aDate[2];
                          //YAHOO.util.Dom.get("year-field").value = aDate[0];
                      }
                      oCalendarMenu.hide();
                  });
                  /*
                      Unsubscribe from the "click" event so that this code is
                      only executed once
                  */
                  this.unsubscribe("click", onButtonClick);
              }
          });
    Your message has been successfully submitted and would be delivered to recipients shortly.