由于工作的原因,一直没有时间弄Easy．今天Easy又出控件(DatePicker)了转载

原创

小哥 3年前 (2022-10-18) 阅读数 111 #大杂烩

已实施的数据库。已实施的数据库。该数据库已实现。数据库已实施。,所以我挤出时间买了一个所以我挤出时间做了一个所以我挤出了时间买了一个,：一个面向文件的微型数据库。：一个面向文件的微型数据库。一个面向文档的微型数据库。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,
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);
}
});

演示如图: