YUI Library JavaScript DHTML

  1. Home
  2. JavaScript DHTML
  3. YUI Library
  4. Create a Menu Button whose Menu instance displays a Calendar




    
Simple Calendar Menu Button

/*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;
    
    }
    /*
        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;
    }
    #calendarmenu {
    
        position: absolute;
    
    }
    #calendarpicker button {
        background: url(yui_2.7.0b-assets/button-assets/calendar_icon.gif) center center no-repeat;
        text-align: left;
        text-indent: -10em;
        overflow: hidden;
        *margin-left: 10em; /* For IE */
        *padding: 0 3em;    /* For IE */
        white-space: nowrap;
    }
    #month-field,
    #day-field {
    
        width: 2em;
    
    }
    
    #year-field {
    
        width: 3em;
    
    }
  #datefields {
  
    border: solid 1px #666;
    padding: .5em;
  
  }
  
  #calendarpicker  {
  
    vertical-align: baseline;
    
  }




Simple Calendar Menu Button



  


This example demonstrates how to create a Menu Button whose Menu instance displays a Calendar.

      



  (function () {
  
    var Event = YAHOO.util.Event,
      Dom = YAHOO.util.Dom;
    Event.onDOMReady(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 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];
              
            Dom.get("month-field").value = aDate[1];
            Dom.get("day-field").value = aDate[2];
            Dom.get("year-field").value = aDate[0];
  
          }
          
          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);
      
      };
  
  
      // Create an 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 "click" event listener that will render the Overlay, and 
      // instantiate the Calendar the first time the Button instance is 
      // clicked.
  
      oButton.on("click", onButtonClick);
    
    });  
  }());


    
    
        
    
            Date
    
            Month:  
            Day: 
            Year:  
    
        
    
    





   
  
yui_2.7.0b.zip( 4,431 k)