最近听网友有时间控件的需求,所以就挤时间弄了一个,如果使用过程中问题可以加入QQ群(158840960), 又可以在该博客留言, 先谢谢各位啦, 下面贴出该控件的代码, 本人文采不好,说不了多少字, 哈哈,请见谅
Easy.UI.DatePicker = Easy.extend(Easy.UI.Base, {
height: 24,
width: "auto",
baseCls: "e-datepicker",
days: [],
format: Easy.Date.defaultDateFormater,
closeAction: 'hide',
constructor: function (cfg) {
Easy.apply(this, cfg);
Easy.UI.DatePicker.superclass.constructor.call(this);
},
initComponent: function () {
var me = this, btns = [];
var date = me.value = me.value || new Date();
btns = [me.create({
tag: 'a',
href: 'javascript:void(0);',
cls: 'year',
html: ' ',
id: 'cutYear'
}), me.create({
tag: 'a',
href: 'javascript:void(0);',
cls: 'month',
html: ' ',
id: 'cutMonth'
}), me.create({
tag: 'a',
href: 'javascript:void(0);',
cls: 'month',
html: ' ',
id: 'addMonth'
}), me.create({
tag: 'a',
href: 'javascript:void(0);',
cls: 'year',
html: ' ',
id: 'addYear'
})];
Easy.DOM.on(btns[0], 'click', function () {
var date = me.value;
date.setFullYear(date.getFullYear() - 1);
me.changeDate.call(me, date);
});
Easy.DOM.on(btns[1], 'click', function () {
var date = me.value;
date.setMonth(date.getMonth() - 1);
me.changeDate.call(me, date);
});
Easy.DOM.on(btns[2], 'click', function () {
var date = me.value;
date.setMonth(date.getMonth() + 1);
me.changeDate.call(me, date);
});
Easy.DOM.on(btns[3], 'click', function () {
var date = me.value;
date.setFullYear(date.getFullYear() + 1);
me.changeDate.call(me, date);
});
var m = me.monthCtl = me.create({
tag: 'input',
cls: 'month',
value: me.getMonth.call(me, date)
}),
y = me.yearCtl = me.create({
tag: 'input',
cls: 'year',
value: me.getYear.call(me, date)
});
me.wrap = me.create({
tag: 'div',
cls: me.baseCls,
children: [{
tag: 'div',
cls: 'e-datepicker-yearbar',
children: [{
tag: 'div',
cls: 'e-datepicker-left-button',
children: [btns[0], btns[1]]
}, {
tag: 'div',
cls: 'e-datepicker-middle-button',
children: [m, y]
}, {
tag: 'div',
cls: 'e-datepicker-right-button',
children: [btns[2], btns[3]]
}]
}, {
tag: 'div',
cls: 'e-datepicker-body',
children: [{
tag: 'div',
cls: 'e-datepicker-week',
children: [{
tag: 'b',
html: '日'
}, {
tag: 'b',
html: '一'
}, {
tag: 'b',
html: '二'
}, {
tag: 'b',
html: '三'
}, {
tag: 'b',
html: '四'
}, {
tag: 'b',
html: '五'
}, {
tag: 'b',
html: '六'
}]
}, me.dayBody = me.create({
tag: 'div',
cls: 'e-datepicker-day'
}), me.timeWrap = me.create({
tag: 'div'
}), {
tag: 'div',
cls: 'e-clear'
}]
}]
}, this.renderTo ? Easy.DOM.get(this.renderTo) : null);
if (me.showTime) {
var sure, time = me.timeCtls = [me.create({
tag: 'input',
type: 'text',
name: 'hour',
value: date.getHours()
}), me.create({
tag: 'span',
html: ':'
}), me.create({
tag: 'input',
type: 'text',
name: 'minute',
value: date.getMinutes()
}), me.create({
tag: 'span',
html: ':'
}), me.create({
tag: 'input',
type: 'text',
name: 'second',
value: date.getSeconds()
})];
me.create({
tag: 'div',
cls: 'e-datepicker-time-wrap',
children: [{
tag: 'label',
html: '时间：'
}, {
tag: 'div',
cls: 'e-datepicker-time',
children: time
}, sure = me.create({
tag: 'input',
type: 'button',
value: '确定'
})]
}, me.timeWrap);
Easy.DOM.on(sure, "click", function () {
var h = time[0].value, m = time[2].value, s = time[4].value, v = me.value;
me.value = new Date(Date.parse(Easy.Date.format(v, 'yyyy/MM/dd ') + h + ":" + m + ":" + s));
me.setValue.call(me);
me[me.closeAction].call(me);
});
}
me.renderDay.call(me, date);
if (me.renderTo) {
me.isRender = true;
}
},
renderDay: function (date) {
var me = this, dates = me.days = [], selectDay = date.getDate();
me.dayBody.innerHTML = "";
me.monthCtl.value = me.getMonth(date);
me.yearCtl.value = me.getYear(date);
if (me.showTime) {
me.timeCtls[0].value = date.getHours();
me.timeCtls[2].value = date.getMinutes();
me.timeCtls[4].value = date.getSeconds();
}
var buidDate = function (day, moth, year, md) {
var rt = day;
var r = me.create({
tag: 'div',
cls: 'e-datepicker-date-wrap'
}), cn, start = 7;
if (day == 1) {
var index = new Date(Date.parse(year + "/" + moth + "/1")).getDay();
var pmd = Easy.Date.getMaxDay(year, moth - 1);
for (var i = pmd - index + 1; i <= pmd; i++) {
var d = me.create({
tag: 'a',
href: 'javascript:void(0);',
month: moth - 1,
cls: 'e-datepicker-date-gray',
html: i
}, r);
dates.push(d);
start--;
Easy.DOM.on(d, "click", function (dom) {
if (me.fireEvent("select", me, dom)) {
Easy.each(me.days, function (dd) {
if (dd == dom) {
Easy.DOM.addClass(dom, "e-datepicker-selected");
} else {
Easy.DOM.removeClass(dd, "e-datepicker-selected");
}
});
me.selectChange.call(me, dom, moth - 1);
}
return false;
});
}
for (var i = 1; i <= start; i++) {
var d = me.create({
tag: 'a',
href: 'javascript:void(0);',
month: moth,
html: i
}, r);
dates.push(d);
if (selectDay == i) {
Easy.DOM.addClass(d, "e-datepicker-selected");
}
rt = i;
Easy.DOM.on(d, "click", function (dom) {
if (me.fireEvent("select", me, dom)) {
Easy.each(me.days, function (dd) {
if (dd == dom) {
Easy.DOM.addClass(dom, "e-datepicker-selected");
} else {
Easy.DOM.removeClass(dd, "e-datepicker-selected");
}
});
me.selectChange.call(me, dom, moth);
}
return false;
});
}
} else {
var last = 0;
for (var i = day; i < day + 7; i++) {
if (i <= md) {
var d = me.create({
tag: 'a',
href: 'javascript:void(0);',
month: moth,
