WebSVN – lars-tiefland.prado – /framework/Web/Javascripts/source/prado/datepicker/datepicker.js

Prado.WebUI.TDatePicker = Class.create();
Object.extend(Prado.WebUI.TDatePicker,
{
        /**
         * @return Date the date from drop down list options.
         */
        getDropDownDate : function(control)
        {
                var now=new Date();
                var year=now.getFullYear();
                var month=now.getMonth();
                var day=1;

                var month_list = this.getMonthListControl(control);
                var day_list = this.getDayListControl(control);
                var year_list = this.getYearListControl(control);

                var day = day_list ? $F(day_list) : 1;
                var month = month_list ? $F(month_list) : now.getMonth();
                var year = year_list ? $F(year_list) : now.getFullYear();

                return new Date(year,month,day, 0, 0, 0);
        },

        getYearListControl : function(control)
        {
                return $(control.id+"_year");
        },

        getMonthListControl : function(control)
        {
                return $(control.id+"_month");
        },

        getDayListControl : function(control)
        {
                return $(control.id+"_day");
        }
});

Prado.WebUI.TDatePicker.prototype =
{
        MonthNames : [  "January",              "February",             "March",        "April",
                "May",                  "June",                 "July",         "August",
                "September",    "October",              "November",     "December"
        ],
        AbbreviatedMonthNames : ["Jan", "Feb", "Mar", "Apr", "May",
                                                "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],

        ShortWeekDayNames : ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat" ],

        Format : "yyyy-MM-dd",

        FirstDayOfWeek : 1, // 0 for sunday

        ClassName : "",

        CalendarStyle : "default",

        FromYear : 2000, UpToYear: 2015,

        initialize : function(options)
        {
                this.options = options || [];
                this.control = $(options.ID);
                this.dateSlot = new Array(42);
                this.weekSlot = new Array(6);
                this.minimalDaysInFirstWeek     = 4;
                this.selectedDate = this.newDate();
                this.positionMode = 'Bottom';

                //which element to trigger to show the calendar
                if(this.options.Trigger)
                {
                        this.trigger = $(this.options.Trigger) ;
                        var triggerEvent = this.options.TriggerEvent || "click";
                }
                else
                {
                        this.trigger  = this.control;
                        var triggerEvent = this.options.TriggerEvent || "focus";
                }
                
                // Popup position
                if(this.options.PositionMode == 'Top')
                {
                        this.positionMode = this.options.PositionMode;
                }

                Object.extend(this,options);

                Event.observe(this.trigger, triggerEvent, this.show.bindEvent(this));
                
                // Listen to change event if needed
                if (typeof(this.options.OnDateChanged) == "function")
                {
                        if(this.options.InputMode == "TextBox")
                        {
                                Event.observe(this.control, "change", this.onDateChanged.bindEvent(this));
                        } 
                        else
                        {
                                var day = Prado.WebUI.TDatePicker.getDayListControl(this.control);
                                var month = Prado.WebUI.TDatePicker.getMonthListControl(this.control);
                                var year = Prado.WebUI.TDatePicker.getYearListControl(this.control);
                                Event.observe (day, "change", this.onDateChanged.bindEvent(this));
                                Event.observe (month, "change", this.onDateChanged.bindEvent(this));
                                Event.observe (year, "change", this.onDateChanged.bindEvent(this));
                                
                        }
                        
                        
                }

        },

        create : function()
        {
                if(typeof(this._calDiv) != "undefined")
                        return;

                var div;
                var table;
                var tbody;
                var tr;
                var td;

                // Create the top-level div element
                this._calDiv = document.createElement("div");
                this._calDiv.className = "TDatePicker_"+this.CalendarStyle+" "+this.ClassName;
                this._calDiv.style.display = "none";
                this._calDiv.style.position = "absolute"

                // header div
                div = document.createElement("div");
                div.className = "calendarHeader";
                this._calDiv.appendChild(div);

                table = document.createElement("table");
                table.style.cellSpacing = 0;
                div.appendChild(table);

                tbody = document.createElement("tbody");
                table.appendChild(tbody);

                tr = document.createElement("tr");
                tbody.appendChild(tr);

                // Previous Month Button
                td = document.createElement("td");
                var previousMonth = document.createElement("input");
                previousMonth.className = "prevMonthButton button";
                previousMonth.type = "button"
                previousMonth.value = "<<";
                td.appendChild(previousMonth);
                tr.appendChild(td);



                //
                // Create the month drop down
                //
                td = document.createElement("td");
                tr.appendChild(td);
                this._monthSelect = document.createElement("select");
                this._monthSelect.className = "months";
            for (var i = 0 ; i < this.MonthNames.length ; i++) {
                var opt = document.createElement("option");
                opt.innerHTML = this.MonthNames[i];
                opt.value = i;
                if (i == this.selectedDate.getMonth()) {
                    opt.selected = true;
                }
                this._monthSelect.appendChild(opt);
            }
                td.appendChild(this._monthSelect);


                //
                // Create the year drop down
                //
                td = document.createElement("td");
                td.className = "labelContainer";
                tr.appendChild(td);
                this._yearSelect = document.createElement("select");
                for(var i=this.FromYear; i <= this.UpToYear; ++i) {
                        var opt = document.createElement("option");
                        opt.innerHTML = i;
                        opt.value = i;
                        if (i == this.selectedDate.getFullYear()) {
                                opt.selected = false;
                        }
                        this._yearSelect.appendChild(opt);
                }
                td.appendChild(this._yearSelect);


                td = document.createElement("td");
                var nextMonth = document.createElement("input");
                nextMonth.className = "nextMonthButton button";
                nextMonth.type = "button";
                nextMonth.value = ">>";
                td.appendChild(nextMonth);
                tr.appendChild(td);

                // Calendar body
                div = document.createElement("div");
                div.className = "calendarBody";
                this._calDiv.appendChild(div);
                var calendarBody = div;

                // Create the inside of calendar body

                var text;
                table = document.createElement("table");
                table.align="center";
                table.className = "grid";

            div.appendChild(table);
                var thead = document.createElement("thead");
                table.appendChild(thead);
                tr = document.createElement("tr");
                thead.appendChild(tr);

                for(i=0; i < 7; ++i) {
                        td = document.createElement("th");
                        text = document.createTextNode(this.ShortWeekDayNames[(i+this.FirstDayOfWeek)%7]);
                        td.appendChild(text);
                        td.className = "weekDayHead";
                        tr.appendChild(td);
                }

                // Date grid
                tbody = document.createElement("tbody");
                table.appendChild(tbody);

                for(week=0; week<6; ++week) {
                        tr = document.createElement("tr");
                        tbody.appendChild(tr);

                for(day=0; day<7; ++day) {
                                td = document.createElement("td");
                                td.className = "calendarDate";
                                text = document.createTextNode(String.fromCharCode(160));
                                td.appendChild(text);

                                tr.appendChild(td);
                                var tmp = new Object();
                                tmp.tag = "DATE";
                                tmp.value = -1;
                                tmp.data = text;
                                this.dateSlot[(week*7)+day] = tmp;

                                Event.observe(td, "mouseover", this.hover.bindEvent(this));
                                Event.observe(td, "mouseout", this.hover.bindEvent(this));

                        }
                }

                // Calendar Footer
                div = document.createElement("div");
                div.className = "calendarFooter";
                this._calDiv.appendChild(div);

                var todayButton = document.createElement("input");
                todayButton.type="button";
                todayButton.className = "todayButton";
                var today = this.newDate();
                var buttonText = today.SimpleFormat(this.Format,this);
                todayButton.value = buttonText;
                div.appendChild(todayButton);

                if(Prado.Browser().ie)
                {
                        this.iePopUp = document.createElement('iframe');
                        this.iePopUp.src = Prado.WebUI.TDatePicker.spacer;
                        this.iePopUp.style.position = "absolute"
                        this.iePopUp.scrolling="no"
                        this.iePopUp.frameBorder="0"
                        this.control.parentNode.appendChild(this.iePopUp);
                }

                this.control.parentNode.appendChild(this._calDiv);

                this.update();
                this.updateHeader();

                this.ieHack(true);

                // IE55+ extension
                previousMonth.hideFocus = true;
                nextMonth.hideFocus = true;
                todayButton.hideFocus = true;
                // end IE55+ extension

                // hook up events
                Event.observe(previousMonth, "click", this.prevMonth.bindEvent(this));
                Event.observe(nextMonth, "click", this.nextMonth.bindEvent(this));
                Event.observe(todayButton, "click", this.selectToday.bindEvent(this));
                //Event.observe(clearButton, "click", this.clearSelection.bindEvent(this));
                Event.observe(this._monthSelect, "change", this.monthSelect.bindEvent(this));
                Event.observe(this._yearSelect, "change", this.yearSelect.bindEvent(this));

                // ie6 extension
                Event.observe(this._calDiv, "mousewheel", this.mouseWheelChange.bindEvent(this));

                Event.observe(calendarBody, "click", this.selectDate.bindEvent(this));

                Prado.Element.focus(this.control);

        },

        ieHack : function(cleanup)
        {
                // IE hack
                if(this.iePopUp)
                {
                        this.iePopUp.style.display = "block";
                        this.iePopUp.style.left = (this._calDiv.offsetLeft -1)+ "px";
                        this.iePopUp.style.top = (this._calDiv.offsetTop -1 ) + "px";
                        this.iePopUp.style.width = Math.abs(this._calDiv.offsetWidth -2)+ "px";
                        this.iePopUp.style.height = (this._calDiv.offsetHeight + 1)+ "px";
                        if(cleanup) this.iePopUp.style.display = "none";
                }
        },

        keyPressed : function(ev)
        {
                if(!this.showing) return;
                if (!ev) ev = document.parentWindow.event;
                var kc = ev.keyCode != null ? ev.keyCode : ev.charCode;

                if(kc == Event.KEY_RETURN || kc == Event.KEY_SPACEBAR || kc == Event.KEY_TAB)
                {
                        this.setSelectedDate(this.selectedDate);
                        Event.stop(ev);
                        this.hide();
                }
                if(kc == Event.KEY_ESC)
                {
                        Event.stop(ev); this.hide();
                }

                var getDaysPerMonth = function (nMonth, nYear)
                {
                        nMonth = (nMonth + 12) % 12;
                var days= [31,28,31,30,31,30,31,31,30,31,30,31];
                        var res = days[nMonth];
                        if (nMonth == 1) //feburary, leap years has 29
                res += nYear % 4 == 0 && !(nYear % 400 == 0) ? 1 : 0;
                return res;
                }

                if(kc < 37 || kc > 40) return true;

                var current = this.selectedDate;
                var d = current.valueOf();
                if(kc == Event.KEY_LEFT)
                {
                        if(ev.ctrlKey || ev.shiftKey) // -1 month
                        {
                current.setDate( Math.min(current.getDate(), getDaysPerMonth(current.getMonth() - 1,current.getFullYear())) ); // no need to catch dec -> jan for the year
                d = current.setMonth( current.getMonth() - 1 );
                        }
                        else
                                d -= 86400000; //-1 day
                }
                else if (kc == Event.KEY_RIGHT)
                {
                        if(ev.ctrlKey || ev.shiftKey) // +1 month
                        {
                                current.setDate( Math.min(current.getDate(), getDaysPerMonth(current.getMonth() + 1,current.getFullYear())) ); // no need to catch dec -> jan for the year
                                d = current.setMonth( current.getMonth() + 1 );
                        }
                        else
                                d += 86400000; //+1 day
                }
                else if (kc == Event.KEY_UP)
                {
                        if(ev.ctrlKey || ev.shiftKey) //-1 year
                        {
                                current.setDate( Math.min(current.getDate(), getDaysPerMonth(current.getMonth(),current.getFullYear() - 1)) ); // no need to catch dec -> jan for the year
                                d = current.setFullYear( current.getFullYear() - 1 );
                        }
                        else
                                d -= 604800000; // -7 days
                }
                else if (kc == Event.KEY_DOWN)
                {
                        if(ev.ctrlKey || ev.shiftKey) // +1 year
                        {
                                current.setDate( Math.min(current.getDate(), getDaysPerMonth(current.getMonth(),current.getFullYear() + 1)) ); // no need to catch dec -> jan for the year
                                d = current.setFullYear( current.getFullYear() + 1 );
                        }
                        else
                                d += 7 * 24 * 61 * 60 * 1000; // +7 days
                }
                this.setSelectedDate(d);
                Event.stop(ev);
        },

        selectDate : function(ev)
        {
                var el = Event.element(ev);
                while (el.nodeType != 1)
                        el = el.parentNode;

                while (el != null && el.tagName && el.tagName.toLowerCase() != "td")
                        el = el.parentNode;

                // if no td found, return
                if (el == null || el.tagName == null || el.tagName.toLowerCase() != "td")
                        return;

                var d = this.newDate(this.selectedDate);
                var n = Number(el.firstChild.data);
                if (isNaN(n) || n <= 0 || n == null)
                        return;

                d.setDate(n);
                this.setSelectedDate(d);
                this.hide();
        },

        selectToday : function()
        {
                if(this.selectedDate.toISODate() == this.newDate().toISODate())
                        this.hide();

                this.setSelectedDate(this.newDate());
        },

        clearSelection : function()
        {
                this.setSelectedDate(this.newDate());
                this.hide();
        },

        monthSelect : function(ev)
        {
                this.setMonth(Form.Element.getValue(Event.element(ev)));
        },

        yearSelect : function(ev)
        {
                this.setYear(Form.Element.getValue(Event.element(ev)));
        },

        // ie6 extension
        mouseWheelChange : function (e)
        {
                if (e == null) e = document.parentWindow.event;
                var n = - e.wheelDelta / 120;
                var d = this.newDate(this.selectedDate);
                var m = d.getMonth() + n;
                this.setMonth(m);

                return false;
        },

        // Respond to change event on the textbox or dropdown list
        // This method raises OnDateChanged event on client side if it has been defined
        onDateChanged : function ()
        {
                if (this.options.OnDateChanged)
                {
                        var date;
                        if (this.options.InputMode == "TextBox")
                        {
                                date=this.control.value;
                        } 
                        else
                        {
                                var day = Prado.WebUI.TDatePicker.getDayListControl(this.control).selectedIndex+1;
                                var month = Prado.WebUI.TDatePicker.getMonthListControl(this.control).selectedIndex;
                                var year = Prado.WebUI.TDatePicker.getYearListControl(this.control).value;
                                date=new Date(year, month, day, 0,0,0).SimpleFormat(this.Format, this);
                        }
                        this.options.OnDateChanged(this, date);
                }
        },
        
        onChange : function()
        { 
                if(this.options.InputMode == "TextBox")
                {
                        this.control.value = this.formatDate();
                        Event.fireEvent(this.control, "change");
                }
                else
                {
                        var day = Prado.WebUI.TDatePicker.getDayListControl(this.control);
                        var month = Prado.WebUI.TDatePicker.getMonthListControl(this.control);
                        var year = Prado.WebUI.TDatePicker.getYearListControl(this.control);
                        var date = this.selectedDate;
                        if(day)
                        {
                                day.selectedIndex = date.getDate()-1;
                        }
                        if(month)
                        {
                                month.selectedIndex = date.getMonth();
                        }
                        if(year)
                        {
                                var years = year.options;
                                var currentYear = date.getFullYear();
                                for(var i = 0; i < years.length; i++)
                                        years[i].selected = years[i].value.toInteger() == currentYear;
                        }
                        Event.fireEvent(day || month || year, "change");
                }
        },

        formatDate : function()
        {
                return this.selectedDate ? this.selectedDate.SimpleFormat(this.Format,this) : '';
        },

        newDate : function(date)
        {
                if(!date)
                        date = new Date();
                if(typeof(date) == "string" || typeof(date) == "number")
                        date = new Date(date);
                return new Date(Math.min(Math.max(date.getFullYear(),this.FromYear),this.UpToYear), date.getMonth(), date.getDate(), 0,0,0);
        },

        setSelectedDate : function(date)
        {
                if (date == null)
                        return;
                var old=this.selectedDate;
                this.selectedDate = this.newDate(date);
                var dateChanged=(old - this.selectedDate != 0) || ( this.options.InputMode == "TextBox" && this.control.value != this.formatDate());

                this.updateHeader();
                this.update();
                if (dateChanged && typeof(this.onChange) == "function")
                        this.onChange(this, date);
        },

        getElement : function()
        {
                return this._calDiv;
        },

        getSelectedDate : function ()
        {
                return this.selectedDate == null ? null : this.newDate(this.selectedDate);
        },

        setYear : function(year)
        {
                var d = this.newDate(this.selectedDate);
                d.setFullYear(year);
                this.setSelectedDate(d);
        },

        setMonth : function (month)
        {
                var d = this.newDate(this.selectedDate);
                d.setDate(Math.min(d.getDate(), this.getDaysPerMonth(month,d.getFullYear())));
                d.setMonth(month);
                this.setSelectedDate(d);
        },

        nextMonth : function ()
        {
                this.setMonth(this.selectedDate.getMonth()+1);
        },

        prevMonth : function ()
        {
                this.setMonth(this.selectedDate.getMonth()-1);
        },

        getDaysPerMonth : function (month, year)
        {
                month = (Number(month)+12) % 12;
        var days = [31,28,31,30,31,30,31,31,30,31,30,31];
                var res = days[month];
                if (month == 1 && ((!(year % 4) && (year % 100)) || !(year % 400))) //feburary, leap years has 29
            res++;
        return res;
        },

        getDatePickerOffsetHeight : function()
        {
                if(this.options.InputMode == "TextBox")
                        return this.control.offsetHeight;

                var control = Prado.WebUI.TDatePicker.getDayListControl(this.control);
                if(control) return control.offsetHeight;

                var control = Prado.WebUI.TDatePicker.getMonthListControl(this.control);
                if(control) return control.offsetHeight;

                var control = Prado.WebUI.TDatePicker.getYearListControl(this.control);
                if(control) return control.offsetHeight;
                return 0;
        },

        show : function()
        {
                this.create();

                if(!this.showing)
                {
                        var pos = this.control.positionedOffset();

                        pos[1] += this.getDatePickerOffsetHeight();
                        this._calDiv.style.top = (pos[1]-1) + "px";
                        this._calDiv.style.display = "block";
                        this._calDiv.style.left = pos[0] + "px";

                        this.documentClickEvent = this.hideOnClick.bindEvent(this);
                        this.documentKeyDownEvent = this.keyPressed.bindEvent(this);
                        Event.observe(document.body, "click", this.documentClickEvent);
                        var date = this.getDateFromInput();
                        if(date)
                        {
                                this.selectedDate = date;
                                this.setSelectedDate(date);
                        }
                        Event.observe(document,"keydown", this.documentKeyDownEvent);
                        this.showing = true;
                        
                        if(this.positionMode=='Top')
                        {
                                this._calDiv.style.top = ((pos[1]-1) - this.getDatePickerOffsetHeight() - this._calDiv.offsetHeight) + 'px';
                                if(Prado.Browser().ie)
                                        this.iePopup = this._calDiv.style.top;                                  
                        }
                        this.ieHack(false);
                }
        },

        getDateFromInput : function()
        {
                if(this.options.InputMode == "TextBox")
                        return Date.SimpleParse($F(this.control), this.Format);
                else
                        return Prado.WebUI.TDatePicker.getDropDownDate(this.control);
        },

        //hide the calendar when clicked outside any calendar
        hideOnClick : function(ev)
        {
                if(!this.showing) return;
                var el = Event.element(ev);
                var within = false;
                do
                {
                        within = within || (el.className && Element.hasClassName(el, "TDatePicker_"+this.CalendarStyle));
                        within = within || el == this.trigger;
                        within = within || el == this.control;
                        if(within) break;
                        el = el.parentNode;
                }
                while(el);
                if(!within) this.hide();
        },


        hide : function()
        {
                if(this.showing)
                {
                        this._calDiv.style.display = "none";
                        if(this.iePopUp)
                                this.iePopUp.style.display = "none";
                        this.showing = false;
                        Event.stopObserving(document.body, "click", this.documentClickEvent);
                        Event.stopObserving(document,"keydown", this.documentKeyDownEvent);
                }
        },

        update : function()
        {
                // Calculate the number of days in the month for the selected date
                var date = this.selectedDate;
                var today = (this.newDate()).toISODate();

                var selected = date.toISODate();
                var d1 = new Date(date.getFullYear(), date.getMonth(), 1);
                var d2 = new Date(date.getFullYear(), date.getMonth()+1, 1);
                var monthLength = Math.round((d2 - d1) / (24 * 60 * 60 * 1000));

                // Find out the weekDay index for the first of this month
                var firstIndex = (d1.getDay() - this.FirstDayOfWeek) % 7 ;
            if (firstIndex < 0)
                firstIndex += 7;

                var index = 0;
                while (index < firstIndex) {
                        this.dateSlot[index].value = -1;
                        this.dateSlot[index].data.data = String.fromCharCode(160);
                        this.dateSlot[index].data.parentNode.className = "empty";
                        index++;
                }

            for (i = 1; i <= monthLength; i++, index++) {
                        var slot = this.dateSlot[index];
                        var slotNode = slot.data.parentNode;
                        slot.value = i;
                        slot.data.data = i;
                        slotNode.className = "date";
                        //slotNode.style.color = "";
                        if (d1.toISODate() == today) {
                                slotNode.className += " today";
                        }
                        if (d1.toISODate() == selected) {
                        //      slotNode.style.color = "blue";
                                slotNode.className += " selected";
                        }
                        d1 = new Date(d1.getFullYear(), d1.getMonth(), d1.getDate()+1);
                }

                var lastDateIndex = index;

            while(index < 42) {
                        this.dateSlot[index].value = -1;
                        this.dateSlot[index].data.data = String.fromCharCode(160);
                        this.dateSlot[index].data.parentNode.className = "empty";
                        ++index;
                }

        },

        hover : function(ev)
        {
                if(Event.element(ev).tagName)
                {
                        if(ev.type == "mouseover")
                                Event.element(ev).addClassName("hover");
                                else
                                Event.element(ev).removeClassName("hover");
                }
        },

        updateHeader : function () {

                var options = this._monthSelect.options;
                var m = this.selectedDate.getMonth();
                for(var i=0; i < options.length; ++i) {
                        options[i].selected = false;
                        if (options[i].value == m) {
                                options[i].selected = true;
                        }
                }

                options = this._yearSelect.options;
                var year = this.selectedDate.getFullYear();
                for(var i=0; i < options.length; ++i) {
                        options[i].selected = false;
                        if (options[i].value == year) {
                                options[i].selected = true;
                        }
                }

        }
};
Subversion-Projekte lars-tiefland.prado

(root)/framework/Web/Javascripts/source/prado/datepicker/datepicker.js @ 15 – Revision 1
