cione-comp-lib
Version:
`$ yarn add cione-comp-lib` 或者 `$ npm i cione-comp-lib -S`
1,295 lines (1,293 loc) • 50.4 kB
JavaScript
import hooks from "../../../node_modules/moment/dist/moment.mjs";
import "./jquery-3.6.0.min.mjs";
import { XNTimepicker } from "./xntimepicker.mjs";
var format = {
week: "YYYY-MM-DD",
date: "YYYY-MM-DD",
daterange: "YYYY-MM-DD",
datetime: "YYYY-MM-DD HH:mm:ss",
datetimerange: "YYYY-MM-DD HH:mm:ss",
month: "YYYY-MM",
monthrange: "YYYY-MM",
year: "YYYY",
yearrange: "YYYY",
multiple: "YYYY-MM-DD"
};
var shortList = {
multiple: [],
week: [
{
name: "\u6700\u8FD1\u4E00\u5468",
value: { startTime: hooks().startOf("week"), endTime: hooks().endOf("week") }
},
{
name: "\u672C\u6708\u7B2C\u4E00\u5468",
value: {
startTime: hooks().startOf("month").startOf("week"),
endTime: hooks().startOf("month").endOf("week")
}
},
{
name: "\u672C\u5E74\u7B2C\u4E00\u5468",
value: {
startTime: hooks().startOf("year").startOf("week"),
endTime: hooks().startOf("year").endOf("week")
}
}
],
date: [
{ name: "\u4ECA\u5929", value: { startTime: hooks().startOf("day") } },
{ name: "\u6628\u5929", value: { startTime: hooks().subtract(1, "days").startOf("day") } },
{ name: "\u672C\u5468\u7B2C\u4E00\u5929", value: { startTime: hooks().startOf("week").startOf("day") } },
{ name: "\u672C\u6708\u7B2C\u4E00\u5929", value: { startTime: hooks().startOf("month").startOf("day") } },
{ name: "\u672C\u5E74\u7B2C\u4E00\u5929", value: { startTime: hooks().startOf("year").startOf("day") } }
],
datetime: [
{ name: "\u73B0\u5728", value: { startTime: hooks() } },
{ name: "\u4ECA\u5929", value: { startTime: hooks().startOf("day") } },
{ name: "\u6628\u5929", value: { startTime: hooks().subtract(1, "days").startOf("day") } },
{ name: "\u672C\u5468\u7B2C\u4E00\u5929", value: { startTime: hooks().startOf("week").startOf("day") } },
{ name: "\u672C\u6708\u7B2C\u4E00\u5929", value: { startTime: hooks().startOf("month").startOf("day") } },
{ name: "\u672C\u5E74\u7B2C\u4E00\u5929", value: { startTime: hooks().startOf("year").startOf("day") } }
],
daterange: [
{ name: "\u6700\u8FD1\u4E00\u5929", value: { startTime: hooks().subtract(1, "days"), endTime: hooks() } },
{
name: "\u6700\u8FD1\u4E09\u5929",
value: { startTime: hooks().subtract(3, "days").startOf("day"), endTime: hooks() }
},
{
name: "\u6700\u8FD1\u4E00\u5468",
value: { startTime: hooks().subtract(7, "days").startOf("day"), endTime: hooks() }
},
{
name: "\u6700\u8FD1\u4E00\u6708",
value: { startTime: hooks().subtract(1, "months").startOf("day"), endTime: hooks() }
},
{
name: "\u6700\u8FD1\u4E00\u5E74",
value: { startTime: hooks().subtract(1, "years").startOf("day"), endTime: hooks() }
},
{
name: "\u672C\u6708",
value: { startTime: hooks().startOf("month").startOf("day"), endTime: hooks() }
},
{
name: "\u672C\u5E74",
value: { startTime: hooks().startOf("year").startOf("day"), endTime: hooks() }
}
],
datetimerange: [
{ name: "\u4ECA\u5929", value: { startTime: hooks().startOf("day"), endTime: hooks() } },
{ name: "\u6700\u8FD1\u4E00\u5929", value: { startTime: hooks().subtract(1, "days"), endTime: hooks() } },
{ name: "\u6700\u8FD1\u4E09\u5929", value: { startTime: hooks().subtract(3, "days"), endTime: hooks() } },
{ name: "\u6700\u8FD1\u4E00\u5468", value: { startTime: hooks().subtract(7, "days"), endTime: hooks() } },
{ name: "\u6700\u8FD1\u4E00\u6708", value: { startTime: hooks().subtract(1, "months"), endTime: hooks() } },
{ name: "\u6700\u8FD1\u4E00\u5E74", value: { startTime: hooks().subtract(1, "years"), endTime: hooks() } },
{ name: "\u672C\u6708", value: { startTime: hooks().startOf("month"), endTime: hooks() } },
{ name: "\u672C\u5E74", value: { startTime: hooks().startOf("year"), endTime: hooks() } }
],
month: [],
monthrange: [
{
name: "\u6700\u8FD1\u4E00\u6708",
value: { startTime: hooks().subtract(1, "months").startOf("month"), endTime: hooks() }
},
{
name: "\u6700\u8FD1\u4E24\u6708",
value: { startTime: hooks().subtract(2, "months").startOf("month"), endTime: hooks() }
},
{
name: "\u6700\u8FD1\u4E09\u6708",
value: { startTime: hooks().subtract(3, "months").startOf("month"), endTime: hooks() }
},
{
name: "\u6700\u8FD1\u4E00\u5E74",
value: { startTime: hooks().subtract(1, "years").startOf("month"), endTime: hooks() }
},
{
name: "\u672C\u5E74",
value: { startTime: hooks().startOf("year").startOf("month"), endTime: hooks() }
}
],
year: [
{ name: "\u672C\u5E74", value: { startTime: hooks().startOf("year") } }
],
yearrange: [
{ name: "\u6700\u8FD1\u4E00\u5E74", value: { startTime: hooks().startOf("year"), endTime: hooks() } },
{
name: "\u6700\u8FD1\u4E24\u5E74",
value: { startTime: hooks().subtract(2, "years").startOf("year"), endTime: hooks() }
},
{
name: "\u6700\u8FD1\u4E09\u5E74",
value: { startTime: hooks().subtract(3, "years").startOf("year"), endTime: hooks() }
},
{
name: "\u6700\u8FD1\u4E94\u5E74",
value: { startTime: hooks().subtract(5, "years").startOf("year"), endTime: hooks() }
},
{
name: "\u6700\u8FD1\u5341\u5E74",
value: { startTime: hooks().subtract(10, "years").startOf("year"), endTime: hooks() }
}
]
};
var option = {
showWeek: true,
placeholder: "\u8BF7\u9009\u62E9",
shortList: [],
locale: {
month: [
"\u4E00\u6708",
"\u4E8C\u6708",
"\u4E09\u6708",
"\u56DB\u6708",
"\u4E94\u6708",
"\u516D\u6708",
"\u4E03\u6708",
"\u516B\u6708",
"\u4E5D\u6708",
"\u5341\u6708",
"\u5341\u4E00\u6708",
"\u5341\u4E8C\u6708"
],
monthHead: [
"1\u6708",
"2\u6708",
"3\u6708",
"4\u6708",
"5\u6708",
"6\u6708",
"7\u6708",
"8\u6708",
"9\u6708",
"10\u6708",
"11\u6708",
"12\u6708"
],
week: ["\u65E5", "\u4E00", "\u4E8C", "\u4E09", "\u56DB", "\u4E94", "\u516D"],
clear: "\u6E05\u7A7A",
confirm: "\u786E\u5B9A",
yearHeadSuffix: "\u5E74"
},
confirmFirst: true,
separator: " \u5230 ",
showType: "modal",
linkPanels: false,
showClear: true,
autoConfirm: true,
showShortKeys: true,
autoFillDate: true,
firstDayOfWeek: 7,
theme: "default",
multipleDates: [],
startTime: "",
endTime: "",
minDate: "",
maxDate: ""
};
function XNDatepicker(targetDom, targetValDom, options, onConfirm, initFn) {
var _this = this;
_this.$targetDom = $(targetDom);
_this.$targetValDom = $(targetValDom);
_this.option = $.extend(false, option, options);
_this.type = _this.option.type;
_this.format = _this.type.indexOf("year") > -1 ? "YYYY" : _this.type.indexOf("month") > -1 ? "YYYY-MM" : _this.type.indexOf("time") > -1 ? "YYYY-MM-DD" : "YYYY-MM-DD";
_this.option.startTime = hooks(_this.option.startTime || hooks());
_this.option.endTime = hooks(_this.option.endTime || hooks());
_this.option.minDate && (_this.option.minDate = hooks(_this.option.minDate));
_this.option.maxDate && (_this.option.maxDate = hooks(_this.option.maxDate));
_this.onConfirm = onConfirm;
_this.initFn = initFn;
_this.selectedDate = {};
_this.date1 = _this.option.startTime.clone();
_this.date2 = _this.option.endTime.clone();
_this.tempdate1;
_this.tempdate2;
_this.multipleDates = $.extend(true, [], _this.option.multipleDates || []);
if (!options.shortList) {
_this.option.shortList = shortList[_this.type];
}
if (!options.format) {
_this.option.format = format[_this.type];
}
_this.id = _this.getRandomString();
_this.show = false;
_this.eventList = {};
_this.init();
_this.addPosEvent();
_this.addTargetEvent();
}
XNDatepicker.prototype = {
init() {
this.setCurrentTime({ startTime: this.option.startTime, endTime: this.option.endTime });
this.rendDatePicker();
this.addEvent();
this.initCallback();
this.initTimePicker();
this.rendHoverStyle();
this.setDate();
this.confirm(false, true);
},
resetCurrentTime(startTime, endTime) {
if (this.type == "multiple") {
this.multipleDates = $.extend(true, [], this.selectedMultiple || []);
}
if (!this.selectedDate[0]) {
this.selectedDate[0] = hooks();
}
if (!this.selectedDate[1] && (this.type == "week" || this.type.indexOf("range") > -1)) {
this.selectedDate[1] = hooks();
}
if (startTime) {
this.selectedDate[0] = hooks(startTime);
}
if (endTime) {
this.selectedDate[1] = hooks(endTime);
}
this.setCurrentTime({ startTime: this.selectedDate[0], endTime: this.selectedDate[1] });
this.setCurrentDay();
this.updateCurrentTime(1);
this.updateCurrentTime(2);
},
getCurrentTargetTime() {
if (this.$targetDom[0].nodeName == "INPUT") {
this.$targetValDom[0].value;
} else {
this.$$targetValDom[0].innerHTML;
}
},
updateCurrentTime(num) {
if (this["timepicker" + num]) {
var date = hooks(this.selectedDate[num - 1]).format("YYYY-MM-DD HH:mm:ss");
this["timepicker" + num].updateCurrentTime(date);
}
},
initTimePicker() {
var that = this;
if (this.type == "datetime" || this.type == "datetimerange") {
this.timepicker1 = new XNTimepicker(this.$container.find(".time1 .timecont"), {
time: that.selectedDate[0],
onConfirm(res2) {
var currentTime = hooks(that.selectedDate[0]);
currentTime = currentTime.hours(res2.value.hour);
currentTime = currentTime.minutes(res2.value.minute);
currentTime = currentTime.seconds(res2.value.second);
that.date1 = currentTime;
that.$container.find(".time1 .timecont>span").html(res2.str);
}
});
}
if (this.type == "datetimerange") {
this.timepicker2 = new XNTimepicker(this.$container.find(".time2 .timecont"), {
time: that.selectedDate[1],
onConfirm(res2) {
var currentTime = hooks(that.selectedDate[1]);
currentTime = currentTime.hours(res2.value.hour);
currentTime = currentTime.minutes(res2.value.minute);
currentTime = currentTime.seconds(res2.value.second);
that.date2 = currentTime;
that.$container.find(".time2 .timecont>span").html(res2.str);
}
});
}
},
initCallback() {
if (this.option.startTime === "") {
this.on("confirm", this.initFn, true);
} else {
this.on("confirm", this.onConfirm, true);
}
},
addTargetEvent() {
var clickFunc = (e) => {
if (e.target == this.$targetDom[0]) {
this.changeShowStatus();
} else if (!$(e.target).parents(".xndatepicker")[0] || $(e.target).parents(".xndatepicker")[0].id != this.id) {
this.changeShowStatus(true);
}
};
this.removeClickEvent = () => {
document.removeEventListener("click", clickFunc, true);
};
document.addEventListener("click", clickFunc, true);
},
changeShowStatus(hide) {
if (this.show || hide) {
this.show = true;
this.$container.slideUp(100);
} else {
this.$container.css({ display: "block", opacity: "0" });
this.resetCurrentTime();
this.$container.animate({ opacity: 1 }, 200);
}
this.show = !this.show;
},
addPosEvent: function() {
window.addEventListener("scroll", function() {
});
window.addEventListener("resize", function() {
});
},
setPosition: function() {
if (!this.$container[0]) {
return;
}
var wwidth = document.documentElement.clientWidth;
var wheight = document.documentElement.clientHeight;
var curcolordom = this.$targetDom[0];
var top = curcolordom.getBoundingClientRect().top;
var targetTop = curcolordom.getBoundingClientRect().top;
var left = curcolordom.getBoundingClientRect().left;
var targetLeft = curcolordom.getBoundingClientRect().left;
var targetWidth = this.$targetDom.outerWidth();
var targetHeight = this.$targetDom.outerHeight();
var domwidth = this.$container.outerWidth();
var domheight = this.$container.outerHeight();
top = top + targetHeight + 10;
var trangletop = -6;
var trangleleft = left + 20;
var borderWidth = "1px 0 0 1px";
if (top + domheight > wheight) {
top = targetTop - domheight - 10;
trangletop = domheight - 7;
borderWidth = "0 1px 1px 0";
}
if (top < 0) {
top = 0;
}
if (left + domwidth > wwidth) {
left = targetLeft + targetWidth - domwidth;
trangleleft = domwidth - 60;
}
if (left < 0) {
left = 0;
}
this.$container[0].style.top = top + "px";
this.$container[0].style.left = left + "px";
this.$container.find(".xntriangle")[0].style.left = trangleleft + "px";
this.$container.find(".xntriangle")[0].style.top = trangletop + "px";
this.$container.find(".xntriangle")[0].style.borderWidth = borderWidth;
},
rendHoverStyle($t) {
if ($t && (this.type.indexOf("year") < 0 && $t.hasClass("year-item") || this.type.indexOf("date") >= 0 && !$t.hasClass("day-item"))) {
return;
}
var format2 = "YYYY-MM";
if (this.type.indexOf("month") > -1)
;
if (this.type.indexOf("month") > -1)
;
if (this.type.indexOf("month") > -1 || this.type.indexOf("year") > -1) {
format2 = "YYYY";
}
if (this.type.indexOf("week") > -1) {
if ($t) {
var date = $t.attr("data-date");
var date1 = hooks(date).subtract(parseInt(this.option.firstDayOfWeek) % 7, "days").startOf("week").add(parseInt(this.option.firstDayOfWeek) % 7, "days").format("YYYY-MM-DD");
var date2 = hooks(date).subtract(parseInt(this.option.firstDayOfWeek) % 7, "days").endOf("week").add(parseInt(this.option.firstDayOfWeek) % 7, "days").format("YYYY-MM-DD");
if (this.option.minDate && hooks(date2).isBefore(this.option.minDate)) {
return;
}
if (this.option.maxDate && hooks(date1).isAfter(this.option.maxDate)) {
return;
}
if (this.option.minDate && hooks(date1).isBefore(this.option.minDate)) {
date1 = hooks(this.option.minDate).format("YYYY-MM-DD");
}
if (this.option.maxDate && hooks(date2).isAfter(this.option.maxDate)) {
date2 = hooks(this.option.maxDate).format("YYYY-MM-DD");
}
this.$container.find(".hover").removeClass("hover");
this.$container.find("[data-date='" + date1 + "']").addClass("hover");
this.$container.find("[data-date='" + date2 + "']").addClass("hover");
this.$container.find("[data-date='" + date1 + "']").nextUntil(this.$container.find("[data-date='" + date2 + "']")).addClass("hover");
} else {
this.$container.find(".hover").removeClass("hover");
}
this.$container.find(".cur-date").eq(0).nextUntil(this.$container.find(".cur-date").eq(1)).addClass("hover");
this.$container.find(".cur-date").eq(1).addClass("right-date");
return;
}
if ($t && !$t.hasClass("active-day")) {
return;
}
if (this.type.indexOf("range") < 0) {
this.$container.find(".cur-date").addClass("circle-date");
return;
}
this.$container.find(".hover").removeClass("hover");
var date1;
var date2;
if ($t && !this.$container.find(".cur-date")[1] && !this.date2) {
date1 = this.$container.find(".cur-date").eq(0).attr("data-date");
date2 = $t.attr("data-date");
$(".circle-date").removeClass("circle-date");
$(".right-date").removeClass("right-date");
let isBefore2 = hooks(date1).isBefore(date2);
if (this.type.indexOf("year") > -1) {
var inSame = Number(date1) - Number(date1) % 12 == Number(date2) - Number(date2) % 12;
} else {
var inSame = hooks(date1).format(format2) == hooks(date2).format(format2);
}
if (date1 != date2) {
if (inSame) {
if (isBefore2) {
this.$container.find(".cur-date").eq(0).nextUntil($t).addClass("hover");
} else {
this.$container.find(".cur-date").eq(0).addClass("right-date");
$t.nextUntil(this.$container.find(".cur-date").eq(0)).addClass("hover");
}
} else {
if (isBefore2) {
this.$container.find(".cur-date").eq(0).nextAll("span").addClass("hover");
$t.prevAll("span").addClass("hover");
} else {
this.$container.find(".cur-date").eq(0).addClass("right-date");
this.$container.find(".cur-date").eq(0).prevAll("span").addClass("hover");
$t.nextAll("span").addClass("hover");
}
}
}
} else {
date1 = this.$container.find(".cur-date").eq(0).attr("data-date");
date2 = this.$container.find(".cur-date").eq(1).attr("data-date");
if (this.$container.find(".cur-date").eq(0).hasClass("circle-date")) {
date2 = date1;
}
$(".circle-date").removeClass("circle-date");
$(".right-date").removeClass("right-date");
var isBefore = hooks(date1, "YYYY-MM-DD").isBefore(hooks(date2, "YYYY-MM-DD"));
if (this.type.indexOf("year") > -1) {
var inSame = Number(date1) - Number(date1) % 12 == Number(date2) - Number(date2) % 12;
} else {
var inSame = hooks(date1).format(format2) == hooks(date2).format(format2);
}
if (date1 != date2) {
if (inSame) {
if (isBefore) {
this.$container.find(".cur-date").eq(0).nextUntil(this.$container.find(".cur-date").eq(1)).addClass("hover");
} else {
this.$container.find(".cur-date").eq(1).nextUntil(this.$container.find(".cur-date").eq(0)).addClass("hover");
}
} else {
this.$container.find(".cur-date").eq(0).nextAll("span").addClass("hover");
this.$container.find(".cur-date").eq(1).prevAll("span").addClass("hover");
}
}
}
if (date1 == date2) {
this.$container.find(".cur-date").eq(0).addClass("circle-date");
} else {
this.$container.find(".cur-date").eq(1).addClass("right-date");
}
},
setDate() {
var date = {};
this.$container.find(".cur-date").each((i, ele) => {
$(ele).parents(".date-item").attr("data-id");
var day = hooks($(ele).attr("data-date"), "YYYY-MM-DD").format("YYYY-MM-DD");
var time = "";
if (this.type.indexOf("time")) {
time = " " + this.$container.find(".time" + (i + 1) + " .timecont>span").html();
}
date[i] = hooks(day);
this.$container.find(".time" + (i + 1) + ">input").val(day);
if (this.$container.find(".circle-date")[0] == ele) {
var j = 1;
date[j] = hooks(day + time);
this.$container.find(".time" + (j + 1) + ">input").val(day);
}
});
this.date1 = date[0];
this.date2 = date[1];
},
rendOtherDateList(otherdatenum) {
if (this.type.indexOf("range") < 0) {
return;
}
var datenum = otherdatenum == 1 ? 2 : 1;
if (otherdatenum < datenum) {
if (this.type.indexOf("date") > -1 || this.type.indexOf("week") > -1) {
if (hooks(this["tempdate" + otherdatenum].format("YYYY-MM")).isSameOrAfter(
this["tempdate" + datenum].format("YYYY-MM")
) || this.option.linkPanels) {
this["tempdate" + datenum] = this["tempdate" + otherdatenum].clone().add(1, "months");
this.geneDateList(this["tempdate" + datenum], this.$container.find(".dater" + datenum));
}
}
if (this.type.indexOf("month") > -1) {
if (this["tempdate" + otherdatenum].isSameOrAfter(this["tempdate" + datenum], "year") || this.option.linkPanels) {
this["tempdate" + datenum] = this["tempdate" + otherdatenum].clone().add(1, "years");
}
this.rendMonth(datenum);
}
if (this.type.indexOf("year") > -1) {
var year1 = this["tempdate" + otherdatenum].format("YYYY");
var year2 = this["tempdate" + datenum].format("YYYY");
var year1P = year1 - year1 % 12;
var year2P = year2 - year2 % 12;
if (year1P >= year2P || this.option.linkPanels) {
this["tempdate" + datenum] = this["tempdate" + otherdatenum].clone().add(12, "years");
}
this.rendYears(datenum);
}
} else {
if (this.type.indexOf("date") > -1 || this.type.indexOf("week") > -1) {
if (hooks(this["tempdate" + otherdatenum].format("YYYY-MM")).isSameOrBefore(
this["tempdate" + datenum].format("YYYY-MM")
) || this.option.linkPanels) {
this["tempdate" + datenum] = this["tempdate" + otherdatenum].clone().subtract(1, "months");
this.geneDateList(this["tempdate" + datenum], this.$container.find(".dater" + datenum));
}
}
if (this.type.indexOf("month") > -1) {
if (this["tempdate" + otherdatenum].isSameOrBefore(this["tempdate" + datenum], "year") || this.option.linkPanels) {
this["tempdate" + datenum] = this["tempdate" + otherdatenum].clone().subtract(1, "years");
}
this.rendMonth(datenum);
}
if (this.type.indexOf("year") > -1) {
var year1 = this["tempdate" + otherdatenum].format("YYYY");
var year2 = this["tempdate" + datenum].format("YYYY");
var year1P = year1 - year1 % 12;
var year2P = year2 - year2 % 12;
if (year1P <= year2P || this.option.linkPanels) {
this["tempdate" + datenum] = this["tempdate" + otherdatenum].clone().subtract(12, "years");
}
this.rendYears(datenum);
}
}
},
addEvent() {
var mouseMoveFunc = (e) => {
var $t = $(e.target);
if ($t.parents(".xndatepicker")[0] == this.$container[0]) {
if ($t.hasClass("day-item") || $t.hasClass("month-item") || $t.hasClass("year-item")) {
this.rendHoverStyle($t);
}
}
};
this.removeMoveEvent = () => {
document.removeEventListener("mousemove", mouseMoveFunc);
};
document.addEventListener("mousemove", mouseMoveFunc);
this.$container[0].addEventListener("click", (e) => {
this.on("confirm", this.onConfirm, true);
var $t = $(e.target);
var datenum = $t.parents(".dater1")[0] ? 1 : 2;
if ($t.hasClass("skip-date")) {
var func = $t.attr("data-func");
var unit = $t.attr("data-unit");
var newdate = $.extend(true, {}, hooks(this["tempdate" + datenum]));
newdate = newdate[func](1, unit + "s").startOf(unit);
if (this.checkDisable(newdate, unit, this.type, unit)) {
return;
}
this["tempdate" + datenum][func](1, unit + "s");
if (unit == "year") {
if (this.option.minDate && this["tempdate" + datenum].isBefore(this.option.minDate)) {
this["tempdate" + datenum] = hooks(this.option.minDate);
}
if (this.option.maxDate && this["tempdate" + datenum].isAfter(this.option.maxDate)) {
this["tempdate" + datenum] = hooks(this.option.maxDate);
}
}
this.geneDateList(this["tempdate" + datenum], this.$container.find(".dater" + datenum));
this.rendOtherDateList(datenum);
}
if ($t.hasClass("month-prev-year")) {
this.rendMonth(datenum);
}
if ($t.hasClass("month-next-year")) {
this.rendMonth(datenum);
}
if ($t.hasClass("year-next-year")) {
var newdate = $.extend(true, {}, hooks(this["tempdate" + datenum]));
newdate = newdate["add"](12, "years").startOf("year");
if (this.checkDisable(newdate, 1, "year")) {
return;
}
this["tempdate" + datenum] = this["tempdate" + datenum].add(12, "years");
this.rendYears(datenum);
this.rendOtherDateList(datenum);
}
if ($t.hasClass("year-prev-year")) {
var newdate = $.extend(true, {}, hooks(this["tempdate" + datenum]));
newdate = newdate.startOf("year");
if (this.checkDisable(newdate, -1, "year")) {
return;
}
this["tempdate" + datenum] = this["tempdate" + datenum].subtract(12, "years");
this.rendYears(datenum);
this.rendOtherDateList(datenum);
}
if (this.type.indexOf("date") > -1 && $t.hasClass("active-day") || $t.hasClass("day-item") && this.type.indexOf("week") > -1) {
this["date" + datenum] = this["tempdate" + datenum].date($t.html()).clone();
this.setCurClass($t);
this.setDate();
if ((this.type.indexOf("date") > -1 || this.type.indexOf("week") > -1) && $t.hasClass("day-item")) {
this.autoConfirm($t);
}
}
if (this.type.indexOf("multiple") > -1 && $t.hasClass("day-item") && !$t.hasClass("disable-day")) {
var date = $t.attr("data-date");
var key = this.multipleDates.indexOf(date);
if (key > -1) {
this.multipleDates.splice(key, 1);
$t.removeClass("cur-date");
} else {
this.multipleDates.push(date);
$t.addClass("cur-date");
}
}
if ($t.hasClass("confirm-date")) {
this.confirm();
}
if ($t.hasClass("current-date")) {
this.currentdate();
}
if ($t.hasClass("clear-date")) {
this.cleardate();
}
if ($t.hasClass("year") || $t.hasClass("month-info")) {
this.rendYears(datenum);
}
if ($t.hasClass("month")) {
this.rendMonth(datenum);
}
if ($t.hasClass("year-item") && !$t.hasClass("disable-year")) {
if (this.type.indexOf("year") > -1) {
this["date" + datenum] = hooks($t.html());
this.setCurClass($t);
this.setDate();
this.autoConfirm($t);
} else {
this["tempdate" + datenum] = this["tempdate" + datenum].year($t.html());
this.rendMonth(datenum);
this.rendOtherDateList(datenum);
}
}
if ($t.hasClass("month-item") && !$t.hasClass("disable-month")) {
if (this.type.indexOf("month") > -1) {
this["date" + datenum] = hooks($t.attr("data-date"));
this.setCurClass($t);
this.setDate();
this.autoConfirm($t);
} else {
this["tempdate" + datenum] = hooks($t.attr("data-date"));
this.geneDateList(this["tempdate" + datenum], this.$container.find(".dater" + datenum));
this.rendOtherDateList(datenum);
}
}
if ($t[0].nodeName == "LI" && $t.parents(".shortcut")[0]) {
var index = $t.parent().find("LI").index($t);
this.setCurrentTime(this.option.shortList[index].value);
this.setCurrentDay();
this.updateCurrentTime(1);
this.updateCurrentTime(2);
this.autoConfirm();
}
this.rendHoverStyle();
});
},
autoConfirm() {
if (!this.option.autoConfirm) {
return;
}
if (this.type.indexOf("range") < 0 && this.type.indexOf("time") < 0 || this.type.indexOf("week") > -1) {
this.confirm();
} else if (this.type.indexOf("range") > -1 && this.date2 && this.date1 && this.type.indexOf("time") < 0) {
this.confirm();
}
},
setCurClass($t) {
if (this.type.indexOf("week") > -1) {
var date = $t.attr("data-date");
var date1 = hooks(date).clone().subtract(parseInt(this.option.firstDayOfWeek) % 7, "days").startOf("week").add(parseInt(this.option.firstDayOfWeek) % 7, "days").format("YYYY-MM-DD");
var date2 = hooks(date).clone().subtract(parseInt(this.option.firstDayOfWeek) % 7, "days").endOf("week").add(parseInt(this.option.firstDayOfWeek) % 7, "days").format("YYYY-MM-DD");
if (this.option.minDate && hooks(date1).isBefore(this.option.minDate)) {
date1 = hooks(this.option.minDate).format("YYYY-MM-DD");
}
if (this.option.maxDate && hooks(date2).isAfter(this.option.maxDate)) {
date2 = hooks(this.option.maxDate).format("YYYY-MM-DD");
}
$(".cur-date").removeClass("cur-date");
this.date1 = hooks(date1);
this.date2 = hooks(date2);
this.$container.find('[data-date="' + this.date1.format("YYYY-MM-DD") + '"]').addClass("cur-date");
this.$container.find('[data-date="' + this.date2.format("YYYY-MM-DD") + '"]').addClass("cur-date");
} else {
if (this.type.indexOf("range") > -1) {
if (this.$container.find(".cur-date").length > 1 || this.$container.find(".circle-date")[0]) {
this.$container.find(".cur-date").removeClass("cur-date");
} else {
if (this.$container.find(".cur-date").eq(0).attr("data-date") == $t.attr("data-date")) {
$t.addClass("circle-date");
}
}
} else {
$(".cur-date").removeClass("cur-date");
}
$t.addClass("cur-date");
}
},
setCurrentTime(date1) {
if (this.option.maxDate && hooks(date1.startTime).isAfter(this.option.maxDate)) {
date1.startTime = hooks(this.option.maxDate).clone();
}
if (this.option.minDate && hooks(date1.endTime).isBefore(this.option.minDate)) {
date1.endTime = hooks(this.option.minDate).clone();
}
if (this.option.minDate && hooks(date1.startTime).isBefore(this.option.minDate)) {
date1.startTime = hooks(this.option.minDate).clone();
}
if (this.option.maxDate && hooks(date1.endTime).isAfter(this.option.maxDate)) {
date1.endTime = hooks(this.option.maxDate).clone();
}
var date = $.extend(true, {}, date1);
date1.startTime && (date.startTime = date1.startTime.clone());
date1.endTime && (date.endTime = date1.endTime.clone());
this.selectedDate[0] = date1.startTime;
this.selectedDate[1] = date1.endTime;
var startTime = date.startTime;
if (this.type.indexOf("range") > -1) {
if (this.type.indexOf("year") > -1) {
var endTime = date.endTime;
var endTime1 = endTime.format("YYYY");
var startTime1 = startTime.format("YYYY");
var endYearP = endTime1 - endTime1 % 12;
var startYearP = startTime1 - startTime1 % 12;
if (startYearP + 12 >= endYearP) {
this.tempdate2 = endTime;
this.tempdate1 = endTime.clone().subtract("12", "years");
} else {
this.tempdate1 = startTime;
this.tempdate2 = endTime;
}
} else if (this.type.indexOf("date") > -1) {
var endTime = date.endTime;
if (startTime.format("YYYY-MM") == endTime.format("YYYY-MM")) {
this.tempdate1 = hooks(endTime).subtract("1", "months");
this.tempdate2 = endTime;
} else {
this.tempdate1 = startTime;
this.tempdate2 = endTime;
}
} else if (this.type.indexOf("month") > -1) {
var endTime = date.endTime;
if (startTime.format("YYYY") == endTime.format("YYYY")) {
this.tempdate2 = endTime;
this.tempdate1 = hooks(endTime).clone().subtract("1", "years");
} else {
this.tempdate1 = startTime;
this.tempdate2 = endTime;
}
}
} else if (this.type != "week") {
this.date1 = startTime;
this.date2 = date.endTime;
this.tempdate1 = this.date1.clone();
delete this.selectedDate[1];
} else {
var date1 = hooks(startTime).clone().subtract(parseInt(this.option.firstDayOfWeek) % 7, "days").startOf("week").add(parseInt(this.option.firstDayOfWeek) % 7, "days");
var date2 = date1.clone().add(6, "days");
if (this.option.minDate && hooks(date1).isBefore(this.option.minDate)) {
date1 = hooks(this.option.minDate.clone());
}
if (this.option.maxDate && hooks(date2).isAfter(this.option.maxDate)) {
date2 = hooks(this.option.maxDate.clone());
}
this.tempdate1 = date1;
this.tempdate2 = date2;
this.selectedDate[0] = date1.clone();
this.selectedDate[1] = date2.clone();
}
this.date1 = this.selectedDate[0].clone();
this.selectedDate[1] && (this.date2 = this.selectedDate[1].clone());
},
setCurrentDay() {
if (this.type.indexOf("range") < 0) {
this.$container.find(".dater2").remove();
this.$container.find(".time2").remove();
}
if (this.type.indexOf("time") < 0) {
this.$container.find(".timepicker").remove();
}
if (this.type.indexOf("year") > -1) {
this.rendYears(1);
this.rendYears(2);
} else if (this.type.indexOf("month") > -1) {
this.rendMonth(1);
this.rendMonth(2);
} else {
this.geneDateList(this.tempdate1, this.$container.find(".dater1"));
this.geneDateList(this.tempdate2, this.$container.find(".dater2"));
}
if (this.type != "multiple") {
for (let i in this.selectedDate) {
let yearmonth = this.selectedDate[i].format("YYYY-MM");
let date = this.selectedDate[i].format("DD");
this.selectedDate[i].format("HH:mm:ss");
this.$container.find(".active-day[data-date='" + yearmonth + "-" + date + "']").addClass("cur-date");
}
this.setCurrentClass();
}
},
setCurrentClass() {
if (this.selectedDate[0]) {
var date1 = this.selectedDate[0].format(this.format);
this.$container.find('.active-day[data-date="' + date1 + '"]').addClass("cur-date");
}
if (this.selectedDate[1]) {
var date2 = this.selectedDate[1].format(this.format);
this.$container.find('.active-day[data-date="' + date2 + '"]').addClass("cur-date");
if (this.type == "week") {
this.$container.find('.day-item[data-date="' + date2 + '"]').addClass("cur-date");
}
if (this.selectedDate[0].format(this.format) == this.selectedDate[1].format(this.format)) {
this.$container.find('.active-day[data-date="' + date2 + '"]').addClass("circle-date");
}
}
this.rendHoverStyle();
},
cleardate() {
this.date1 = "";
this.date2 = "";
this.selectedDate[0] = "";
this.selectedDate[1] = "";
this.selectedMultiple = [];
this.confirm(true);
},
currentdate() {
this.date1 = hooks();
this.date2 = hooks();
this.confirm();
},
confirm(clear, isFirst) {
var canconfirm = false;
var showstr;
if (this.type == "multiple") {
if (clear) {
if (isFirst && this.option.confirmFirst || !isFirst) {
this.trigger("confirm", { startTime: this.selectedMultiple });
}
showstr = "";
canconfirm = true;
} else {
this.selectedMultiple = this.multipleDates;
if (isFirst && this.option.confirmFirst || !isFirst) {
this.trigger("confirm", { startTime: this.selectedMultiple });
}
showstr = this.multipleDates.join(",");
canconfirm = true;
}
} else {
this.date1 && (this.selectedDate[0] = this.date1.clone());
this.date2 && (this.selectedDate[1] = this.date2.clone());
if (clear) {
if (isFirst && this.option.confirmFirst || !isFirst) {
this.trigger("confirm", {
startTime: this.selectedDate[0],
endTime: this.selectedDate[1]
});
}
showstr = "";
canconfirm = true;
}
if (this.type.indexOf("range") > -1 && this.date2 || this.type.indexOf("week") > -1) {
if (isFirst && this.option.confirmFirst || !isFirst) {
this.trigger("confirm", {
startTime: this.selectedDate[0],
endTime: this.selectedDate[1]
});
}
try {
showstr = this.selectedDate[0].format(this.option.format) + this.option.separator + this.selectedDate[1].format(this.option.format);
} catch (e) {
showstr = "";
}
canconfirm = true;
} else if (this.type.indexOf("range") < 0 && this.date1) {
if (isFirst && this.option.confirmFirst || !isFirst) {
this.trigger("confirm", { startTime: this.selectedDate[0] });
}
try {
showstr = this.selectedDate[0].format(this.option.format);
} catch (e) {
showstr = "";
}
canconfirm = true;
}
}
if (!canconfirm) {
return;
}
this.changeShowStatus(true);
if (!this.option.autoFillDate) {
return;
}
if (this.$targetDom[0].nodeName == "INPUT") {
this.$targetValDom[0].value = showstr;
} else {
this.$targetValDom[0].innerHTML = showstr;
}
if (showstr == "") {
this.$targetValDom[0].innerHTML = this.option.placeholder;
}
this.$targetDom.addClass("iconfont-xndatepicker icon-xndatepickerrili xndatepicker-input");
this.$targetDom.attr("data-placeholder", this.option.placeholder);
},
rendMonth(datenum) {
if (!this.$container.find(".dater" + datenum)[0]) {
return;
}
var $html = $(`
<div class="year-picker">
<div class="prev">
<span class="iconfont-xndatepicker icon-xndatepickerprev1 month-prev-year skip-date" data-unit="year" data-func="subtract"><</span>
</div>
<div class="month-info"></div>
<div class="next">
<span class="iconfont-xndatepicker icon-xndatepickerprev1 month-next-year skip-date" data-unit="year" data-func="add">></span>
</div>
</div>
<div class="month-list">
</div>
`);
this.$container.find(".dater" + datenum).empty().append($html);
var monthlist = this.getMonthList(datenum);
this.$container.find(".dater" + datenum).find(".month-list").append(monthlist);
this.setTodayDot("month");
},
getMonthList(datenum) {
var curYear = hooks(this["tempdate" + datenum]).format("YYYY");
this.$container.find(".dater" + datenum + " .month-info")[0].innerHTML = curYear;
var html = "";
for (let i = 0; i < 12; i++) {
let disable = !((this.option.minDate && hooks(this.option.minDate).startOf("month").isSameOrBefore(curYear + "/" + (i + 1) + "/01") || !this.option.minDate) && (this.option.maxDate && hooks(this.option.maxDate).startOf("month").isSameOrAfter(curYear + "/" + (i + 1) + "/01") || !this.option.maxDate));
html += `<span class="month-item ${disable ? "disable-month" : "active-day"}" data-date="${hooks(
curYear + "/" + (i + 1),
"YYYY/MM"
).format("YYYY-MM")}">` + this.option.locale.month[i] + "</span>";
}
return html;
},
rendYears(datenum) {
if (!this.$container.find(".dater" + datenum)[0]) {
return;
}
var $html = $(`
<div class="year-picker">
<div class="prev">
<span class="iconfont-xndatepicker icon-xndatepickerprev1 year-prev-year"><</span>
</div>
<div class="year-info"></div>
<div class="next">
<span class="iconfont-xndatepicker icon-xndatepickerprev1 year-next-year">></span>
</div>
</div>
<div class="year-list">
</div>
`);
this.$container.find(".dater" + datenum).empty().append($html);
var yearlist = this.getYearList(datenum);
this.$container.find(".dater" + datenum).find(".year-list").append(yearlist);
this.setTodayDot("year");
},
getYearList(datenum) {
var chooseYear = hooks(this["tempdate" + datenum]).format("YYYY");
var curYear = chooseYear - chooseYear % 12;
this.$container.find(".dater" + datenum + " .year-info")[0].innerHTML = curYear + "-" + (parseInt(curYear) + 11);
var html = "";
for (let i = 0; i < 12; i++) {
let disable = !((this.option.minDate && hooks(this.option.minDate).startOf("year").isSameOrBefore(parseInt(curYear) + i + "/01/01") || !this.option.minDate) && (this.option.maxDate && hooks(this.option.maxDate).startOf("year").isSameOrAfter(parseInt(curYear) + i + "/01/01") || !this.option.maxDate));
html += `<span class="year-item ${disable ? "disable-year" : "active-day"}" data-date="${parseInt(curYear) + i}">` + (parseInt(curYear) + i) + "</span>";
}
return html;
},
getDateCont() {
var html = `<div class="year-picker">
<div class="prev">
<span class="iconfont-xndatepicker icon-xndatepickerprev prev-year skip-date" data-unit="year" data-func="subtract"></span>
<span class="iconfont-xndatepicker icon-xndatepickerprev1 prev-month skip-date" data-unit="month" data-func="subtract"></span>
</div>
<div class="year-info"></div>
<div class="next">
<span class="iconfont-xndatepicker icon-xndatepickerprev1 next-month skip-date" data-unit="month" data-func="add"></span>
<span class="iconfont-xndatepicker icon-xndatepickerprev next-year skip-date" data-unit="year" data-func="add"></span>
</div>
</div>`;
if (this.option.showWeek) {
html += `<div class="week">`;
for (let i = parseInt(this.option.firstDayOfWeek); i < parseInt(this.option.firstDayOfWeek) + 7; i++) {
html += `<span>${this.option.locale.week[i % 7]}</span>`;
}
html += `</div>`;
}
html += `<div class="dater">
</div>`;
return html;
},
rendDatePicker() {
let bodyW = document.body.offsetWidth;
let targetlayout = this.$targetDom.offset();
let targetWidth = this.$targetDom.width();
let targetHeight = this.$targetDom.height();
let conW = 224;
let conHalfW = 224 / 2;
let conTop = targetlayout.top + targetHeight + 20;
let conLeft = targetlayout.left + targetWidth / 2 - conHalfW;
let triangleTop = -5;
let triangleLeft = 106;
if (targetlayout.left < conHalfW) {
conLeft = 20;
triangleLeft = targetlayout.left + targetHeight / 2 + 10;
} else if (bodyW - targetlayout.left < conW) {
conLeft = bodyW - conW - 20;
triangleLeft = conW - (bodyW - targetlayout.left - targetWidth / 2) + 20;
}
this.$container = $(
`<div class="xndatepicker ${this.type}" id="${this.id}" style="width:224px;top:${conTop}px;left:${conLeft}px">
<div class="xn-top">
<div class="shortcut">
</div>
<div class="date-main">
<div class="timepicker">
<div class="timeitem time1">
<input>
<div class="timecont">
<span></span>
</div>
</div>
<div class="timeitem time2">
<input>
<div class="timecont">
<span></span>
</div>
</div>
</div>
<div class="datepicker">
<div class="date-item dater1" data-id="1">
` + this.getDateCont() + `
</div>
<div class="date-item dater2" data-id="2">
` + this.getDateCont() + `
</div>
</div>
</div>
</div>
<div class="xn-bottom">
<!-- <a class="xn-btn current-date">\u73B0\u5728</a>-->
<a class="xn-btn clear-date">${this.option.locale.clear}</a>
<a class="xn-btn confirm-date">${this.option.locale.confirm}</a>
</div>
<div class="xntriangle" style="top: ${triangleTop}px;left: ${triangleLeft}px;"></div>
</div>`
);
$(document.body).append(this.$container);
this.changeShowStatus(true);
this.setCurrentDay();
this.geneShortList();
if (this.type.indexOf("range") < 0 && this.type.indexOf("time") < 0 && this.type != "multiple") {
this.$container.find(".confirm-date").remove();
} else {
if (!this.option.showClear && this.option.autoConfirm && this.type != "multiple") {
this.$container.find(".xn-bottom").remove();
}
}
if (!this.option.showClear) {
this.$container.find(".clear-date").remove();
}
if (!this.option.showShortKeys || this.option.shortList.length < 1) {
this.$container.find(".shortcut").remove();
}
},
geneShortList() {
var ul = "<ul>";
for (let i = 0; i < this.option.shortList.length; i++) {
ul += "<li>" + this.option.shortList[i].name + "</li>";
}
ul += "</ul>";
this.$container.find(".shortcut").empty().append(ul);
},
_getDaysNum(date) {
var ynow = date.year();
var mnow = date.month();
var m_days = new Array(31, 28 + this.is_leap(ynow), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
return m_days[mnow];
},
geneDateList(curdate, $cont) {
if (!$cont || !curdate || this.type.indexOf("date") < 0 && this.type != "week" && this.type != "multiple") {
return;
}
var date = curdate.clone();
$cont.empty().append(this.getDateCont());
var ynow = date.year();
var mnow = date.month() + 1;
var firstday = hooks(date).startOf("month").day() - parseInt(this.option.firstDayOfWeek);
if (firstday < 0) {
firstday += 7;
}
var m_days = this._getDaysNum(date);
var l_days = this._getDaysNum(hooks(date).subtract(1, "months"));
var ldates = [];
for (let i = firstday - 1; i >= 0; i--) {
ldates.push({ day: l_days - i });
}
for (let i = 0; i < m_days; i++) {
ldates.push({
iscur: true,
disable: this.checkDisable(
hooks(ynow + "/" + mnow + "/" + (i + 1), "YYYY/MM/DD"),
0,
this.type,
"date"
),
day: i + 1
});
}
var l = ldates.length;
for (let i = 0; i < 42 - l; i++) {
ldates.push({ day: i + 1, isnext: true });
}
this._rendDayHtml(ldates, $cont, ynow + "/" + mnow);
this._rendYearHtml(date, $cont);
if (this.type == "multiple") {
for (let i = 0; i < this.multipleDates.length; i++) {
this.$container.find("span[data-date=" + this.multipleDates[i] + "]").addClass("cur-date");
}
}
},
checkDisable(date, dir, type, unit) {
var disable = true;
if (!this.option.minDate && !this.option.maxDate) {
return false;
}
if (this.type.indexOf("year") > -1 || type == "year") {
var year = date.format("YYYY");
var min = this.option.minDate ? hooks(this.option.minDate).format("YYYY") : 0;
var max = this.option.maxDate ? hooks(this.option.maxDate).format("YYYY") : year;
var yearP = year - year % 12 - 12;
var minP = min - min % 12;
var maxP = max - max % 12;
if ((dir > 0 || minP <= yearP) && (dir < 0 || maxP >= yearP + 12)) {
disable = false;
}
} else {
var format2 = "YYYY-MM";
if (unit == "year") {
format2 = "YYYY";
}
if (unit == "date") {
format2 = "YYYY-MM-DD";
}
if ((!this.option.minDate || this.option.minDate && this.option.minDate.format(format2) <= date.format(format2)) && (!this.option.maxDate || this.option.maxDate && this.option.maxDate.format(format2) >= date.format(format2))) {
disable = false;
}
}
return disable;
},
_rendYearHtml(date, $cont) {
var ynow = date.year();
var mnow = date.month() + 1;
$cont.find(".year-info").html(
"<span class='year'>" + ynow + this.option.locale.yearHeadSuffix + "</span><span class='month'>" + this.option.locale.monthHead[mnow - 1] + "</span>"
);
},
_rendDayHtml(datelist, $cont, year) {
var $c = $cont.find(".dater");
if ($c.length < 1) {
$cont.append('<div class="dater"></div>');
}
$c.empty();
for (let i = 0; i < 6; i++) {
for (let j = i * 7; j < i * 7 + 7; j++) {
let li = document.createElement("span");
li.classList.add("day-item");
if (datelist[j].iscur) {
if (!datelist[j].disable) {
li.classList.add("active-day");
}
li.setAttribute(
"data-date",
hooks(year + "/" + datelist[j].day, "YYYY/MM/DD").format("YYYY-MM-DD")
);
} else {
if (datelist[j].isnext) {
li.setAttribute(
"data-date",
hooks(year + "/" + datelist[j].day, "YYYY/MM/DD").add(1, "months").format("YYYY-MM-DD")
);
} else {
li.setAttribute(
"data-date",
hooks(year, "YYYY/MM").subtract(1, "months").date(datelist[j].day).format("YYYY-MM-DD")
);
}
}
if (datelist[j].disable) {
li.classList.add("disable-day");
}
li.append(datelist[j].day);
$c.append(li);
}
}
this.setTodayDot("day");
},
is_leap(year) {
return year % 100 == 0 ? res = year % 400 == 0 ? 1 : 0 : res = year % 4 == 0 ? 1 : 0;
},
trigger(type, data) {
if (this.eventList[type]) {
for (let i = 0; i < this.eventList[type].func.length; i++) {
this.eventList[type].func[i](data);
}
}
},
on(type, func, remove) {
if (remove) {
this.eventList = {};
}
if (!this.eventList[type]) {
this.eventList[type] = {
func: [func]
};
} else {
this.eventList[type].func.push(func);
}
},
getRandomString(len) {
len = len || 8;
var $chars = "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz";
var maxPos = $chars.length;
var pwd = "";
for (let i = 0; i < len; i++) {
pwd += $chars.charAt(Math.floor(Math.random() * maxPos));
}
return pwd;
},
_setData(_key, $watch) {
Object.defineProperty(this, _key, {
get: () => {
return this[_key];
},
set: (val) => {
const oldVal = this[_key];
this[_key] = val;
$watch(val, oldVal);
return val;
}
});
},
_getBaseType(target) {
const typeStr = Object.prototype.toString.apply(target);
return typeStr.slice(8, -1);
},
watch(key, callback) {
this._setData(key, callback);
},
setTodayDot(type) {
var date = hooks().format("YYYY-MM-DD");
if (type == "year") {