sync.calendarselect.js

echo3 很炫的ajax框架技术 js 演示demo ajax j2ee 里面有jsp演示代码

/**
 * Component rendering peer: CalendarSelect
 */
Extras.Sync.CalendarSelect = Core.extend(Echo.Render.ComponentSync, {

    $static: {
    
        DEFAULT_BORDER: "1px outset #cfcfcf",
        DEFAULT_BACKGROUND: "#cfcfcf",
        DEFAULT_FOREGROUND: "#000000",
        DEFAULT_FONT: {
            size: "10pt"
        },
        DEFAULT_DATE_FOREGROUND: "#000000",
        DEFAULT_DATE_BACKGROUND: "#dfdfdf",
        DEFAULT_DATE_BORDER: {
            top: "1px solid #efefef",
            left: "1px solid #efefef",
            right: "1px solid #bfbfbf",
            bottom: "1px solid #bfbfbf"
        },
        DEFAULT_SELECTED_DATE_FOREGROUND: "#ffffff",
        DEFAULT_SELECTED_DATE_BACKGROUND: "#2f2f6f",
        DEFAULT_ADJACENT_MONTH_DATE_FOREGROUND: "#8f8f8f",
        MINIMUM_YEAR: 1582,
        MAXIMUM_YEAR: 9999,

        _DAYS_IN_MONTH: [31, null, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31],
        
        resource: new Core.ResourceBundle({
            "DayOfWeek.0":     "Sunday",
            "DayOfWeek.1":     "Monday",
            "DayOfWeek.2":     "Tuesday",
            "DayOfWeek.3":     "Wednesday",
            "DayOfWeek.4":     "Thursday",
            "DayOfWeek.5":     "Friday",
            "DayOfWeek.6":     "Saturday",
            "Month.0":         "January",
            "Month.1":         "February",
            "Month.2":         "March",
            "Month.3":         "April",
            "Month.4":         "May",
            "Month.5":         "June",
            "Month.6":         "July",
            "Month.7":         "August",
            "Month.8":         "September",
            "Month.9":         "October",
            "Month.10":        "November",
            "Month.11":        "December",
            "FirstDayOfWeek":  0
        }),
        
        Animation: Core.extend(Extras.Sync.Animation, {
        
            _oldContent: null,
            _newContent: null,
            _vertical: null,
            _direction: null,
            runTime: 500,
            _containerBounds: null,
            _travel: null,
            _overlap: null,
        
            $construct: function(container, oldContent, newContent, vertical, forward, overlap, oldColor, newColor) {
                this._container = container;
                this._oldContent = oldContent;
                this._newContent = newContent;
                this._vertical = vertical;
                this._forward = forward;
                this._overlap = overlap || 0;
                this._oldColor = oldColor;
                this._newColor = newColor;
            },
        
            init: function() {
                this._containerBounds = new Core.Web.Measure.Bounds(this._container);
                this._travel = (this._vertical ? this._containerBounds.height : this._containerBounds.width) - this._overlap;
                this._adjust = this._vertical ? (this._forward ? "top" : "bottom") : (this._forward ? "left" : "right"); 
                this._newContent.style[this._adjust] = this._travel + "px";
                this._container.appendChild(this._newContent);
            },

            step: function(progress) {
                var position = Math.round(this._travel * (1 - progress));
                this._oldContent.style.color = Echo.Sync.Color.blend(this._oldColor, this._newColor, 2 * progress);
                this._oldContent.style[this._adjust] = (position - this._travel) + "px";
                this._newContent.style[this._adjust] = position + "px";
            },

            complete: function(abort) {
                this._newContent.style.left = this._newContent.style.top = 
                        this._newContent.style.right = this._newContent.style.bottom = "";
                if (this._oldContent.parentNode) {
                    this._oldContent.parentNode.removeChild(this._oldContent);
                }
            }
        }),
        
        MonthData: Core.extend({
            
            firstDayOfMonth: null,
            daysInMonth: null,
            daysInPreviousMonth: null,
            year: null,
            month: null,
            weekCount: null,
            firstCellPosition: null,
            
            $construct: function(year, month, firstDayOfWeek) {
                this.year = year;
                this.month = month;
                var firstDate = new Date(year, month, 1);
                this.firstDayOfMonth = firstDate.getDay();

                this.daysInMonth = Extras.Sync.CalendarSelect.getDaysInMonth(year, month);
                this.daysInPreviousMonth = month === 0 ? Extras.Sync.CalendarSelect.getDaysInMonth(year - 1, 11) :
                        this._daysInPreviousMonth = Extras.Sync.CalendarSelect.getDaysInMonth(year, month - 1);
                
                this.firstCellPosition = (7 + this.firstDayOfMonth - firstDayOfWeek) % 7;
                this.nextMonthWeek = Math.floor((this.firstCellPosition + this.daysInMonth) / 7); 
                this.weekCount = Math.ceil((this.firstCellPosition + this.daysInMonth) / 7);
            },
            
            getCellDate: function(cellIndex) {
                var date;
                if (cellIndex < this.firstCellPosition) {
                    date = this.month === 0 ? { month: 11, year: this.year - 1 } :
                            { month: this.month - 1, year: this.year };
                    date.day = this.daysInPreviousMonth - this.firstDayOfMonth + cellIndex + 1;
                } else if (cellIndex >= (this.firstDayOfMonth + this.daysInMonth)) {
                    date = this.month === 11 ? { month: 0, year: this.year + 1 } :
                            { month: this.month + 1, year: this.year };
                    date.day = cellIndex - this.firstDayOfMonth - this.daysInMonth + 1;
                } else {
                    date = { month: this.month, year: this.year, day: cellIndex - this.firstDayOfMonth + 1 };
                }
                return date;
            },
            
            getCellIndex: function(day) {
                return day + this.firstCellPosition - 1;
            },
            
            isCellAdjacent: function(cellIndex) {
                return cellIndex < this.firstCellPosition || cellIndex >= (this.firstDayOfMonth + this.daysInMonth);
            }
        }),
        
        /**
         * Determines the number of days in a specific month.
         *
         * @param year the year of the month
         * @param month the month
         * @return the number of days in the month
         */
        getDaysInMonth: function(year, month) {
            if (month == 1) {
                if (year % 400 === 0) {
                    return 29;
                } else if (year % 100 === 0) {
                    return 28;
                } else if (year % 4 === 0) {
                    return 29;
                } else {
                    return 28;
                }
            } else {
                return this._DAYS_IN_MONTH[month];
            }
        }
    },

    $load: function() {
        Echo.Render.registerPeer("Extras.CalendarSelect", this);
    },
    
    _div: null,
    _monthSelect: null,
    _yearField: null,
    
    _dateRolloverBackground: null,
    _dateRolloverBackgroundImage: null,
    _dateRolloverBorder: null,
    _dateRolloverForeground: null,
    
    _dateSelectedBackground: null,
    _dateSelectedBackgroundImage: null,
    _dateSelectedBorder: null,
    _dateSelectedForeground: null,
    
    _rolloverCellIndex: null,
    
    _displayedMonth: null,
    _displayedYear: null,
    _firstDayOfWeek: null,
    
    _date: null,
    
    _msg: null,
    
    _icons: { },
    
    _animateUpdate: function(animate, vertical, forward, rowOverlap) {
        if (this._animation) {
            this._animation.abort();
        }
        
        var newDayContainerDiv = this._createDayContainer();
        var overlap = rowOverlap ? (rowOverlap * this._cellHeight + (rowOverlap - 1) * this._vCellSpacing) : 0;
        this._animation = new Extras.Sync.CalendarSelect.Animation(this._scrollContainer, this._dayContainerDiv, newDayContainerDiv, 
                vertical, forward, overlap, this._dateForeground, this._dateAdjacentForeground);
        this._animation.start(Core.method(this, function(abort) {
            this._dayContainerDiv = newDayContainerDiv;
            this._animation = null;
        }));
    },
    
    _createDayContainer: function() {
        var dayContainerDiv = document.createElement("div");
        dayContainerDiv.style.cssText = "position:absolute;";
        dayContainerDiv.style.width = this._rowWidth + "px";
        dayContainerDiv.style.height = (this._ySize * this._cellHeight + (this._ySize - 1) * this._vCellSpacing) + "px";
        for (var y = 0; y < this._ySize; ++y) {
            var rowDiv = this._createWeek(y);
            rowDiv.style.top = (y * (this._cellHeight + this._vCellSpacing)) + "px";
            dayContainerDiv.appendChild(rowDiv);
        }
        return dayContainerDiv;
    },
    
    _createMonthYearInput: function() {
        var i, option, img,