datefield.lib.js

asp的bbs程序

/*
  By Hangring
  #2008.01.24#
  ---
  use list:
  > global.lib.js
  > calendar.lib.js
  > css.lib.js
  > node.lib.js
  > events.lib.js
  > popup.lib.js
  ---
  日期选择域
  ---
  包含样式：
  <link rel="stylesheet" href="../css/datefield.lib.css" type="text/css" />
*/

function DateField (alone /* :Boolean */) {
    this.container = null;

    // text field object, it having the date value
    this.textField = null;
    // the name of text filed object
    this.name = 'date_' + Math.random();

    // stand alone or not
    this.alone = (alone = !!alone);

    // stand alone
    if (alone) {
        // calendar object
        this.calendar = new Calendar();
    }
    // not stand alone
    else {
        if (! DateField.Calendar)
            DateField.Calendar = new Calendar();
        this.calendar = DateField.Calendar;

        if (! DateField.DateField)
            DateField.DateField = this;
    }
    // sign to calendar create or not
    this.IsCreate = false;
    // contain the calendar object
    this.panel = null;
    // panel is display or not
    this.panelDisplay = false;

    // current selected date
    this.selectedDate = new Date();

    // css
    this.css = {
        datefield:'datefield',
        textfield_container:'textfield-container',
        textfield:'textfield'
    };
}

// stand alone relative
DateField.DateField = null;
DateField.Calendar = null;
DateField.Panel = null;
DateField.IsCreate = false;
DateField.PanelDisplay = false;

DateField.prototype.Create = function () {
    var self = this;

    var container = this.container = oNode.CreateNode('div');
    CSS.AddClass(container, this.css.datefield);
    Events.AttachEvent(container, 'click', function () {
        self._Click();
    });

    // text field
    var textFieldContainer = oNode.CreateNode('div');
    oNode.AddNode(textFieldContainer, container);
    CSS.AddClass(textFieldContainer, this.css.textfield_container);
    var textField = this.textField = oNode.CreateNode('input');
    oNode.AddNode(textField, textFieldContainer);
    CSS.AddClass(textField, this.css.textfield);
    textField.type = 'text';
    textField.name = this.name;
    textField.value = this.selectedDate.getFullYear() + '-' + (this.selectedDate.getMonth() + 1) + '-' + this.selectedDate.getDate();//this.selectedDate;

    return container;
};

// focus event to create colorpanel
DateField.prototype._Click = function () {
    var self = this;
    var c = this.container;
    var panel;
    if ((!self.alone && !DateField.IsCreate) || (self.alone && !self.isCreate)) {
        if (self.alone) {
            self.isCreate = true;
        }
        else {
            DateField.IsCreate = true;
        }

        var calendar = self.calendar;
        calendar.selectedDate = (self.alone ? self : DateField.DateField).selectedDate;
        calendar.isControl = true;
        calendar.Init();
        calendar.ContentChange = function () {
            (self.alone ? self : DateField.DateField)._ContentChange();
        };
        calendar.Change = function (date) {
            (self.alone ? self : DateField.DateField)._Change(date);
            (self.alone ? self : DateField.DateField).SetVisible(false);
        };
        calendar.Create();

        if (self.alone) {
            panel = PopUp.Panel(calendar.container);
        }
        else {
            if (! DateField.Panel)
                DateField.Panel = PopUp.Panel(calendar.container);
            panel = DateField.Panel;
        }
        self.panel = panel;

        PopUp.AddPopUp(panel);
        PopUp.AddMask(panel);

        Events.AttachEvent(document, 'mousedown', function (e) {
            var obj = $EO(e);
            var df = self.alone ? self : DateField.DateField;
            while (obj) {
                if (obj === df.container || obj === df.panel) {
                    return;
                }
                obj = obj.parentNode;
            }
            //self.SetVisible(false);
            (self.alone ? self : DateField.DateField).SetVisible(false);
        });
        Events.AttachEvent(window, 'resize', resize);
    }
    else {
        panel = self.alone ? self.panel : (self.panel = DateField.Panel);
    }
    //alert(panel);

    function resize () {
        var x = Global.GetOffsetLeft(c);
        var y = Global.GetOffsetTop(c) + c.offsetHeight;
        PopUp.SetXY(panel, x, y);
    }
    resize();

    self.SetVisible(self.alone ? !self.panelDisplay : !DateField.PanelDisplay);
};

// 可由外部分配调用
DateField.prototype.Click = function () {
    this._Click();
};

// 设置样式
DateField.prototype.SetStyle = function (style /* :String */, css /* :String */) {
    if (typeof css != 'string') return;
    if (typeof this.css[style] == 'undefined' && typeof this.calendar.css[style] == 'string')
        this.calendar.css[style] = css;
    else
        this.css[style] = css;
};

// 设置显示隐藏
DateField.prototype.SetVisible = function (visible /* :Boolean */) {
    if (! this.calendar) return;
    if (this.alone) {
        this.panelDisplay = visible;
    }
    else {
        DateField.PanelDisplay = visible;
    }
    if (visible) {
        PopUp.ResetSize(this.panel);
        this.alone || (DateField.DateField = this);
        this.calendar.selectedDate = this.selectedDate;
        this.calendar.Create(this.selectedDate.getFullYear(), this.selectedDate.getMonth());
    }
    this.calendar.SetVisible(false);
    PopUp.SetVisible(this.panel, visible);
}

// 显示日期内容改变
DateField.prototype._ContentChange = function () {
    PopUp.ResetSize(this.alone ? this.panel : DateField.DateField.panel);
    this.ContentChange();
};

// 显示日期内容改变
DateField.prototype.ContentChange = function () {
    
};

// 日期改变时调用
DateField.prototype._Change = function (date /* :Date */) {
    this.selectedDate = date;
    this.textField.value = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
    this.Change(date);
};

// 日期改变时调用（由用户设置）
DateField.prototype.Change = function (date /* :Date */) {
    
};