YUI Library JavaScript DHTML


            



    
Calendar and Select Fields

/*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;
}







  #cal1Container { margin-right:10px; margin-bottom:10px }




Calendar and Select Fields


  This example builds upon the Events example, by demonstrating how you can use the select event to set the state of some dropdowns. It also demonstates how the current page and selected date can be set on the Calendar after it is first rendered.



    
         
        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        12
    
    
         
        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        12
        13
        14
        15
        16
        17
        18
        19
        20
        21
        22
        23
        24
        25
        26
        27
        28
        29
        30
        31
    
    
         
        2006
        2007
        2008
        2009
        2010
    


    YAHOO.namespace("example.calendar");
    YAHOO.example.calendar.init = function() {
    
        function handleSelect(type,args,obj) {
            var dates = args[0]; 
            var date = dates[0];
            var year = date[0], month = date[1], day = date[2];
            var selMonth = document.getElementById("selMonth");
            var selDay = document.getElementById("selDay");
            var selYear = document.getElementById("selYear");
            
            selMonth.selectedIndex = month;
            selDay.selectedIndex = day;
            for (var y=0;y                if (selYear.options[y].text == year) {
                    selYear.selectedIndex = y;
                    break;
                }
            }
        }
        function updateCal() {
            var selMonth = document.getElementById("selMonth");
            var selDay = document.getElementById("selDay");
            var selYear = document.getElementById("selYear");
            
            var month = parseInt(selMonth.options[selMonth.selectedIndex].text);
            var day = parseInt(selDay.options[selDay.selectedIndex].value);
            var year = parseInt(selYear.options[selYear.selectedIndex].value);
            
            if (! isNaN(month) && ! isNaN(day) && ! isNaN(year)) {
                var date = month + "/" + day + "/" + year;
                YAHOO.example.calendar.cal1.select(date);
                YAHOO.example.calendar.cal1.cfg.setProperty("pagedate", month + "/" + year);
                YAHOO.example.calendar.cal1.render();
            }
        }
        YAHOO.example.calendar.cal1 = new YAHOO.widget.Calendar("cal1","cal1Container", 
                                                                    { mindate:"1/1/2006",
                                                                      maxdate:"12/31/2010" });
        YAHOO.example.calendar.cal1.selectEvent.subscribe(handleSelect, YAHOO.example.calendar.cal1, true);
        YAHOO.example.calendar.cal1.render();
        YAHOO.util.Event.addListener(["selMonth","selDay","selYear"], "change", updateCal);
    }
    YAHOO.util.Event.onDOMReady(YAHOO.example.calendar.init);






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