Calendar-and-Text-Fields

YUI Library JavaScript DHTML


            



    
Calendar and Text 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;
}







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




Calendar and Text Fields


  
This example builds upon the Events example, by demonstrating how you can use the select event to set the state of a text box on the page. 

It also demonstates how to limit the dates which can be selected using the mindate/maxdate properties and how the current page and selected date can be set on the Calendar after it is first rendered.

    Update Calendar

    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 txtDate1 = document.getElementById("date1");
            txtDate1.value = month + "/" + day + "/" + year;
        }
        function updateCal() {
            var txtDate1 = document.getElementById("date1");
            if (txtDate1.value != "") {
                YAHOO.example.calendar.cal1.select(txtDate1.value);
                var selectedDates = YAHOO.example.calendar.cal1.getSelectedDates();
                if (selectedDates.length > 0) {
                    var firstDate = selectedDates[0];
                    YAHOO.example.calendar.cal1.cfg.setProperty("pagedate", (firstDate.getMonth()+1) + "/" + firstDate.getFullYear());
                    YAHOO.example.calendar.cal1.render();
                } else {
                    alert("Cannot select a date before 1/1/2006 or after 12/31/2010");
                }

            }
        }
        // For this example page, stop the Form from being submitted, and update the cal instead
        function handleSubmit(e) {
            updateCal();
            YAHOO.util.Event.preventDefault(e);
        }

        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("update", "click", updateCal);
        YAHOO.util.Event.addListener("dates", "submit", handleSubmit);
    }
    YAHOO.util.Event.onDOMReady(YAHOO.example.calendar.init);