Calendar-Menu-Button-with-Date-on-Button-Face


            



    
Calendar Menu Button with Date on Button Face

/*margin and padding on body element
  can introduce errors in determining
  element position and are not recommended;
  we turn them off as a foundation for YUI
  CSS treatments. */
body {
  margin:0;
  padding:0;
}











    /*
        Set the "zoom" property to "normal" since it is set to "1" by the 
        ".example-container .bd" rule in yui.css and this causes a Menu
        instance's width to expand to 100% of the browser viewport.
    */
    
    div.yuimenu .bd {
    
        zoom: normal;
    
    }
    #calendarmenu {
    
        position: absolute;
    
    }
    /*
        Restore default padding of 10px for the calendar containtainer 
        that is overridden by the ".example-container .bd .bd" rule 
        in yui.css.
    */
    #calendarcontainer {
        padding:10px;
    }
    
  #personalinfo {
  
    border: solid 1px #666;
    padding: .5em;
  
  }
  
  #calendarpicker  {
  
    vertical-align: baseline;
    
  }
  div.field {
  
    padding: .25em;
  
  }
  
  input#year {
  
    width: 4em;
  
  }




Calendar Menu Button with Date on Button Face


  
This example demonstrates how to create a Menu Button whose Menu displays a 
Calendar.  Selecting a date from the Calendar updates the label of the Button 
to reflect the currently selected date.




  (function () {
  
    var Event = YAHOO.util.Event,
      Dom = YAHOO.util.Dom;  
    Event.onContentReady("datefields", function () {
      var oCalendarMenu;
  
      var onButtonClick = function () {
  
        // 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 "select" event to 
        // update the Button instance's label when the user
        // selects a date.
  
        oCalendar.selectEvent.subscribe(function (p_sType, p_aArgs) {
  
          var aDate,
            nMonth,
            nDay,
            nYear;
  
          if (p_aArgs) {
            
            aDate = p_aArgs[0][0];
  
            nMonth = aDate[1];
            nDay = aDate[2];
            nYear = aDate[0];
  
            oButton.set("label", (nMonth + "/" + nDay + "/" + nYear));
  
  
            // Sync the Calendar instance's selected date with the date form fields
  
            Dom.get("month").selectedIndex = (nMonth - 1);
            Dom.get("day").selectedIndex = (nDay - 1);
            Dom.get("year").value = nYear;
  
          }
          
          oCalendarMenu.hide();
        
        });
  
  
        // Pressing the Esc key will hide the Calendar Menu and send focus back to 
        // its parent Button
  
        Event.on(oCalendarMenu.element, "keydown", function (p_oEvent) {
        
          if (Event.getCharCode(p_oEvent) === 27) {
            oCalendarMenu.hide();
            this.focus();
          }
        
        }, null, this);
        
        
        var focusDay = function () {
          var oCalendarTBody = Dom.get("buttoncalendar").tBodies[0],
            aElements = oCalendarTBody.getElementsByTagName("a"),
            oAnchor;
          
          if (aElements.length > 0) {
          
            Dom.batch(aElements, function (element) {
            
              if (Dom.hasClass(element.parentNode, "today")) {
                oAnchor = element;
              }
            
            });
            
            
            if (!oAnchor) {
              oAnchor = aElements[0];
            }
            // Focus the anchor element using a timer since Calendar will try 
            // to set focus to its next button by default
            
            YAHOO.lang.later(0, oAnchor, function () {
              try {
                oAnchor.focus();
              }
              catch(e) {}
            });
          
          }
          
        };
        // Set focus to either the current day, or first day of the month in 
        // the Calendar  when it is made visible or the month changes
  
        oCalendarMenu.subscribe("show", focusDay);
        oCalendar.renderEvent.subscribe(focusDay, oCalendar, true);
  
        // Give the Calendar an initial focus
        
        focusDay.call(oCalendar);
  
  
        // Re-align the CalendarMenu to the Button to ensure that it is in the correct
        // position when it is initial made visible
        
        oCalendarMenu.align();
  
        // Unsubscribe from the "click" event so that this code is 
        // only executed once
  
        this.unsubscribe("click", onButtonClick);
      
      };
  
  
      var oDateFields = Dom.get("datefields");
        oMonthField = Dom.get("month"),
        oDayField = Dom.get("day"),
        oYearField = Dom.get("year");
  
  
      // Hide the form fields used for the date so that they can be replaced by the 
      // calendar button.
  
      oMonthField.style.display = "none";
      oDayField.style.display = "none";
      oYearField.style.display = "none";
  
  
      // Create a Overlay instance to house the Calendar instance
  
      oCalendarMenu = new YAHOO.widget.Overlay("calendarmenu", { visible: false });
  
  
      // 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" });
  
  
      oButton.on("appendTo", function () {
      
        // 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";
      
      });
  
  
      // Add a listener for the "click" event.  This listener will be
      // used to defer the creation the Calendar instance until the 
      // first time the Button's Overlay instance is requested to be displayed
      // by the user.
  
      oButton.on("click", onButtonClick);
    
    });
  }());


    
    Personal Information
    
          First Name:

YUI Library JavaScript DHTML

Calendar Menu Button with Date on Button Face