由于工作的原因,一直没有时间弄Easy．今天Easy又出控件(DatePicker)了
最近听网友有时间控件的需求,所以就挤时间弄了一个,如果使用过程中问题可以加入QQ群(158840960), 又可以在该博客留言, 先谢谢各位啦, 下面贴出该控件的代码, 本人文采不好,说不了多少字, 哈哈,请见谅
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,
html: i
}, r);
dates.push(d);
if (selectDay == i) {
Easy.DOM.addClass(d, "e-datepicker-selected");
}
rt = i;
last++;
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 {
break;
}
}
if (last < 7) {
for (var k = 1; k <= 7 - last; k++) {
var d = me.create({
tag: 'a',
href: 'javascript:void(0);',
month: moth + 1,
cls: 'e-datepicker-date-gray',
html: k
}, r);
dates.push(d);
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;
});
}
}
}
Easy.DOM.render(r, me.dayBody);
return rt;
}
var md = Easy.Date.getMaxDay(date),
moth = date.getMonth() + 1, year = date.getFullYear();
var day = 0;
for (var i = 1; i <= Math.ceil(md / 7.0) + 1; i++) {
if (i == 1) {
day = buidDate(1, moth, year, md);
} else {
day = buidDate(day + 1, moth, year, md);
}
if (day >= md)
break;
}
me.days = dates;
},
initEvent: function () {
var me = this;
},
selectChange: function (dom, month) {
var me = this, date = me.value;
var newDate = new Date(Date.parse(date.getFullYear() + "/" + month + "/" + dom.innerHTML));
me.value = newDate;
if (date.getMonth() + 1 != month) {
var newDate = new Date(Date.parse(date.getFullYear() + "/" + month + "/" + dom.innerHTML));
me.monthCtl.value = me.getMonth.call(me, newDate);
me.yearCtl.value = me.getYear.call(me, newDate);
me.renderDay(newDate);
}
if (me.target && !me.showTime) {
me[me.closeAction].call(me);
}
},
getMonth: function (date, lang) {
var month = date.getMonth();
var zhMonth = ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"];
if (!lang || lang == 'zh-cn') {
return zhMonth[month]
} else {
return month + 1;
}
},
getYear: function (date, lang) {
var year = date.getFullYear();
return year;
},
onSelect: function () {
return true;
},
changeDate: function (date) {
var me = this;
me.value = date;
me.renderDay.call(me, date);
},
setValue: function () {
var me = this;
me.target.value = Easy.Date.format(me.value, me.format);
me.fireEvent("setValue", me, me.value);
return true;
},
hide: function () {
var me = this;
Easy.DOM.hide(me.wrap);
me.setValue.call(me);
me.fireEvent("hide", me, me.value);
},
close: function () {
var me = this;
Easy.removeNode(this.wrap);
me.isRender = false;
me.setValue.call(me);
me.fireEvent("close", me, me.value);
},
show: function (target, e) {
var me = this;
me.target = target;
var tike = Date.parse((target.value || "").replace(/-/g, "/"));
if (target.value && !isNaN(tike)) {
me.renderDay.call(me, new Date(tike));
}
Easy.DOM.show(me.wrap);
var xy = Easy.DOM.getPosition(target), scroll = Easy.getScroll();
if (!me.isRender) {
Easy.DOM.render(me.wrap, Easy.getBody());
me.isRender = true;
}
Easy.DOM.setStyle(me.wrap, {
position: 'absolute'
});
Easy.DOM.setXY(me.wrap, {
x: xy.x, y: xy.y + target.offsetHeight
});
me.fireEvent('show', me);
}
});
演示如图:
图-1 支持选择时间 图-2 只能选择日期
