function selected(cal, date) {

            if (cal.dateClicked) {
                // if we add this call we close the calendar on single-click.
                // just to exemplify both cases, we are using this only for the 1st
                // and the 3rd field, while 2nd and 4th will still require double-click.
                cal.sel.value = date; // just update the date in the input field.
                cal.callCloseHandler();
            }
        }

        // And this gets called when the end-user clicks on the _selected_ date,
        // or clicks on the "Close" button.  It just hides the calendar without
        // destroying it.
        function closeHandler(cal) {
            cal.hide();                        // hide the calendar
            //cal.destroy();
            _dynarch_popupCalendar = null;
        }

        // This function shows the calendar under the element having the given id.
        // It takes care of catching "mousedown" signals on document and hiding the
        // calendar if the click was outside.
        function showCalendar(id, format, showsTime, showsOtherMonths, inputID) {
        //debugger;
            var el = document.getElementById(id);
            if (_dynarch_popupCalendar != null) {
                // we already have some calendar created
                _dynarch_popupCalendar.hide();                 // so we hide it first.
            } else {
                // first-time call, create the calendar.
                var cal = new Calendar(1, null, selected, closeHandler);
                // uncomment the following line to hide the week numbers
                // cal.weekNumbers = false;
                if (typeof showsTime == "string") {
                    cal.showsTime = false;
                    cal.time24 = (showsTime == "24");
                }
                if (showsOtherMonths) {
                    cal.showsOtherMonths = true;
                }
                _dynarch_popupCalendar = cal;                  // remember it in the global var
                cal.setRange(1900, 2070);        // min/max year allowed.
                cal.create();
            }
            var oTarget = document.getElementById(inputID);
            _dynarch_popupCalendar.singleClick = true;
            _dynarch_popupCalendar.setDateFormat(format);    // set the specified date format
            _dynarch_popupCalendar.parseDate(oTarget.value);      // try to parse the text in field
            _dynarch_popupCalendar.sel = oTarget;                 // inform it what input field we use


            // the reference element that we pass to showAtElement is the button that
            // triggers the calendar.  In this example we align the calendar bottom-right
            // to the button.
            //_dynarch_popupCalendar.showAtElement(el, "Br");        // show the calendar
            var xy = getElementPos(el);
            _dynarch_popupCalendar.showAt(xy[0], xy[1]);

            return true;
        }

        var MINUTE = 60 * 1000;
        var HOUR = 60 * MINUTE;
        var DAY = 24 * HOUR;
        var WEEK = 7 * DAY;

        //得到某一元素的绝对位置,不管该元素嵌套在多复杂的位置里  
        function getElementPos(obj) {
            var left = 0;
            var top = 0;
            var height = obj.clientHeight;
            if (obj.x) {
                left = obj.x;
                top = obj.y;
                //alert(left+",x,"+top);
            } else if (obj.offsetParent) {
                while (obj.offsetParent) {
                    left += obj.offsetLeft;
                    top += obj.offsetTop;
                    obj = obj.offsetParent;
                }
                //alert(left+",o,"+top);
            }
            
            return [left, top + height]; //封装在一个数组里  
        }

        // If this handler returns true then the "date" given as
        // parameter will be disabled.  In this example we enable
        // only days within a range of 10 days from the current
        // date.
        // You can use the functions date.getFullYear() -- returns the year
        // as 4 digit number, date.getMonth() -- returns the month as 0..11,
        // and date.getDate() -- returns the date of the month as 1..31, to
        // make heavy calculations here.  However, beware that this function
        // should be very fast, as it is called for each day in a month when
        // the calendar is (re)constructed.
        function isDisabled(date) {
            var today = new Date();
            return (Math.abs(date.getTime() - today.getTime()) / DAY) > 10;
        }

        function flatSelected(cal, date) {
            //var el = document.getElementById("preview");
            //el.innerHTML = date;
        }

        function showFlatCalendar() {
            var parent = document.getElementById("display");

            // construct a calendar giving only the "selected" handler.
            var cal = new Calendar(0, null, flatSelected);

            // hide week numbers
            cal.weekNumbers = false;

            // We want some dates to be disabled; see function isDisabled above
            cal.setDisabledHandler(isDisabled);
            cal.setDateFormat("%A, %B %e");

            // this call must be the last as it might use data initialized above; if
            // we specify a parent, as opposite to the "showCalendar" function above,
            // then we create a flat calendar -- not popup.  Hidden, though, but...
            cal.create(parent);

            // ... we can show it here.
            cal.show();
        }