@ajaxjs/util 1.1.1 → 1.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +55 -6
- package/dist/index.esm.js +525 -0
- package/dist/index.umd.js +536 -0
- package/dist/{util → src/core}/cookies.d.ts +18 -18
- package/dist/{util → src/core}/dom.d.ts +17 -17
- package/dist/{util → src/core}/utils.d.ts +51 -51
- package/dist/{util → src/core}/xhr-config.d.ts +22 -22
- package/dist/{util → src/core}/xhr.d.ts +71 -71
- package/dist/src/index.d.ts +5 -0
- package/package.json +39 -43
- package/{dist/util/cookies.js → src/core/cookies.ts} +15 -18
- package/{dist/util/dom.js → src/core/dom.ts} +17 -14
- package/{dist/util/utils.js → src/core/utils.ts} +82 -77
- package/src/core/xhr-config.ts +25 -0
- package/{dist/util/xhr.js → src/core/xhr.ts} +128 -94
- package/src/index.ts +6 -0
- package/LICENSE +0 -201
- package/dist/index.d.ts +0 -38
- package/dist/index.js +0 -71
- package/dist/index.js.map +0 -1
- package/dist/main.d.ts +0 -1
- package/dist/main.js +0 -16
- package/dist/main.js.map +0 -1
- package/dist/router/index.d.ts +0 -3
- package/dist/router/index.js +0 -44
- package/dist/router/index.js.map +0 -1
- package/dist/router.d.ts +0 -3
- package/dist/router.js +0 -44
- package/dist/router.js.map +0 -1
- package/dist/shims-vue.d.ts +0 -4
- package/dist/style/common-functions.less +0 -294
- package/dist/style/reset.less +0 -19
- package/dist/util/cookies.js.map +0 -1
- package/dist/util/dom.js.map +0 -1
- package/dist/util/utils.js.map +0 -1
- package/dist/util/xhr-config.js +0 -3
- package/dist/util/xhr-config.js.map +0 -1
- package/dist/util/xhr.js.map +0 -1
- package/dist/widget/AccordionMenu.vue +0 -140
- package/dist/widget/AdjustFontSize.vue +0 -65
- package/dist/widget/Article.vue +0 -59
- package/dist/widget/EmptyContent.d.ts +0 -5
- package/dist/widget/EmptyContent.js +0 -7
- package/dist/widget/EmptyContent.js.map +0 -1
- package/dist/widget/Expander.vue +0 -65
- package/dist/widget/FileUploader/FileUploader.d.ts +0 -70
- package/dist/widget/FileUploader/FileUploader.js +0 -139
- package/dist/widget/FileUploader/FileUploader.js.map +0 -1
- package/dist/widget/FileUploader/FileUploader.less +0 -68
- package/dist/widget/FileUploader/FileUploader.ts +0 -156
- package/dist/widget/FileUploader/FileUploader.vue +0 -43
- package/dist/widget/HtmlEditor/HtmlEditor.d.ts +0 -70
- package/dist/widget/HtmlEditor/HtmlEditor.js +0 -287
- package/dist/widget/HtmlEditor/HtmlEditor.js.map +0 -1
- package/dist/widget/HtmlEditor/HtmlEditor.less +0 -345
- package/dist/widget/HtmlEditor/HtmlEditor.ts +0 -339
- package/dist/widget/HtmlEditor/HtmlEditor.vue +0 -70
- package/dist/widget/HtmlEditor/html-editor-HtmlSanitizer.js +0 -103
- package/dist/widget/ImageEnlarger.vue +0 -105
- package/dist/widget/OpacityBanner.vue +0 -125
- package/dist/widget/ProcessLine.vue +0 -133
- package/dist/widget/Resize.d.ts +0 -51
- package/dist/widget/Resize.js +0 -133
- package/dist/widget/Resize.js.map +0 -1
- package/dist/widget/Resize.ts +0 -152
- package/dist/widget/Resize.vue +0 -104
- package/dist/widget/TreeSelector.vue +0 -4
- package/dist/widget/calendar/BetweenDate.vue +0 -63
- package/dist/widget/calendar/Calendar.d.ts +0 -55
- package/dist/widget/calendar/Calendar.js +0 -145
- package/dist/widget/calendar/Calendar.js.map +0 -1
- package/dist/widget/calendar/Calendar.less +0 -210
- package/dist/widget/calendar/Calendar.ts +0 -167
- package/dist/widget/calendar/Calendar.vue +0 -52
- package/dist/widget/calendar/CalendarInput.vue +0 -71
- package/dist/widget/form/validator.d.ts +0 -70
- package/dist/widget/form/validator.js +0 -220
- package/dist/widget/form/validator.js.map +0 -1
- package/dist/widget/form/validator.ts +0 -289
- package/dist/widget/play-ground/sku.vue +0 -93
|
@@ -1,63 +0,0 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<form action="." method="GET" class="dateRange" @submit="valid">
|
|
3
|
-
<aj-form-calendar-input
|
|
4
|
-
:date-only="true"
|
|
5
|
-
:position-fixed="true"
|
|
6
|
-
placeholder="起始时间"
|
|
7
|
-
field-name="startDate"
|
|
8
|
-
></aj-form-calendar-input>
|
|
9
|
-
-
|
|
10
|
-
<aj-form-calendar-input
|
|
11
|
-
:date-only="true"
|
|
12
|
-
:position-fixed="true"
|
|
13
|
-
placeholder="截至时间"
|
|
14
|
-
field-name="endDate"
|
|
15
|
-
></aj-form-calendar-input>
|
|
16
|
-
<button class="aj-btn">按时间筛选</button>
|
|
17
|
-
</form>
|
|
18
|
-
</template>
|
|
19
|
-
|
|
20
|
-
<script lang="ts">
|
|
21
|
-
/**
|
|
22
|
-
* 起始时间、截止时间的范围选择
|
|
23
|
-
*/
|
|
24
|
-
export default {
|
|
25
|
-
props: {
|
|
26
|
-
isAjax: { type: Boolean, default: true }, // 是否 AJAX 模式
|
|
27
|
-
},
|
|
28
|
-
methods: {
|
|
29
|
-
valid(this: Vue, ev: Event): void {
|
|
30
|
-
let start = (<HTMLInputElement>(
|
|
31
|
-
this.$el.querySelector("input[name=startDate]")
|
|
32
|
-
)).value,
|
|
33
|
-
end = (<HTMLInputElement>this.$el.querySelector("input[name=endDate]"))
|
|
34
|
-
.value;
|
|
35
|
-
|
|
36
|
-
if (!start || !end) {
|
|
37
|
-
alert("输入数据不能为空");
|
|
38
|
-
ev.preventDefault();
|
|
39
|
-
return;
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
if (new Date(start) > new Date(end)) {
|
|
43
|
-
alert("起始日期不能晚于结束日期");
|
|
44
|
-
ev.preventDefault();
|
|
45
|
-
return;
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
//@ts-ignore
|
|
49
|
-
if (this.isAjax) {
|
|
50
|
-
ev.preventDefault();
|
|
51
|
-
let grid: any = this.$parent.$parent;
|
|
52
|
-
|
|
53
|
-
Object.assign(grid.$refs.pager.extraParam, {
|
|
54
|
-
startDate: start,
|
|
55
|
-
endDate: end,
|
|
56
|
-
});
|
|
57
|
-
|
|
58
|
-
grid.reload();
|
|
59
|
-
}
|
|
60
|
-
},
|
|
61
|
-
},
|
|
62
|
-
};
|
|
63
|
-
</script>
|
|
@@ -1,55 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* 日期选择器
|
|
3
|
-
*/
|
|
4
|
-
declare const _default: {
|
|
5
|
-
props: {
|
|
6
|
-
showTime: BooleanConstructor;
|
|
7
|
-
};
|
|
8
|
-
data(): {
|
|
9
|
-
date: Date;
|
|
10
|
-
year: number;
|
|
11
|
-
month: number;
|
|
12
|
-
day: number;
|
|
13
|
-
};
|
|
14
|
-
mounted(): void;
|
|
15
|
-
watch: {
|
|
16
|
-
date(): void;
|
|
17
|
-
};
|
|
18
|
-
methods: {
|
|
19
|
-
/**
|
|
20
|
-
* 画日历
|
|
21
|
-
*/
|
|
22
|
-
render(): void;
|
|
23
|
-
/**
|
|
24
|
-
* 获取指定的日期
|
|
25
|
-
*
|
|
26
|
-
* @param dateType
|
|
27
|
-
* @param month
|
|
28
|
-
*/
|
|
29
|
-
getDate(dateType: 'preMonth' | 'nextMonth' | 'setMonth' | 'preYear' | 'nextYear', month: number): void;
|
|
30
|
-
/**
|
|
31
|
-
*
|
|
32
|
-
*
|
|
33
|
-
* @param querySelectoreven
|
|
34
|
-
*/
|
|
35
|
-
setMonth(ev: Event): void;
|
|
36
|
-
/**
|
|
37
|
-
* 获取空白的非上月天数 + 当月天数
|
|
38
|
-
*
|
|
39
|
-
* @param this
|
|
40
|
-
*/
|
|
41
|
-
getDateArr(): number[];
|
|
42
|
-
/**
|
|
43
|
-
* 获取日期
|
|
44
|
-
*
|
|
45
|
-
* @param event
|
|
46
|
-
*/
|
|
47
|
-
pickDay(ev: Event): string;
|
|
48
|
-
/**
|
|
49
|
-
*
|
|
50
|
-
* @param event
|
|
51
|
-
*/
|
|
52
|
-
pickupTime(event: Event): void;
|
|
53
|
-
};
|
|
54
|
-
};
|
|
55
|
-
export default _default;
|
|
@@ -1,145 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
/**
|
|
4
|
-
* 日期选择器
|
|
5
|
-
*/
|
|
6
|
-
exports.default = {
|
|
7
|
-
props: {
|
|
8
|
-
showTime: Boolean // 是否显示时间,即“时分秒”
|
|
9
|
-
},
|
|
10
|
-
data() {
|
|
11
|
-
let date = new Date;
|
|
12
|
-
return {
|
|
13
|
-
date: date,
|
|
14
|
-
year: date.getFullYear(),
|
|
15
|
-
month: date.getMonth() + 1,
|
|
16
|
-
day: 1
|
|
17
|
-
};
|
|
18
|
-
},
|
|
19
|
-
mounted() {
|
|
20
|
-
this.$options.watch.date.call(this);
|
|
21
|
-
},
|
|
22
|
-
watch: {
|
|
23
|
-
date() {
|
|
24
|
-
this.year = this.date.getFullYear();
|
|
25
|
-
this.month = this.date.getMonth() + 1;
|
|
26
|
-
this.render();
|
|
27
|
-
}
|
|
28
|
-
},
|
|
29
|
-
methods: {
|
|
30
|
-
/**
|
|
31
|
-
* 画日历
|
|
32
|
-
*/
|
|
33
|
-
render() {
|
|
34
|
-
let arr = this.getDateArr(), // 用来保存日期列表
|
|
35
|
-
frag = document.createDocumentFragment(); // 插入日期
|
|
36
|
-
while (arr.length) {
|
|
37
|
-
let row = document.createElement("tr"); // 每个星期插入一个 tr
|
|
38
|
-
for (let i = 1; i <= 7; i++) { // 每个星期有7天
|
|
39
|
-
let cell = document.createElement("td");
|
|
40
|
-
if (arr.length) {
|
|
41
|
-
let d = arr.shift();
|
|
42
|
-
if (d) {
|
|
43
|
-
let text = this.year + '-' + this.month + '-' + d;
|
|
44
|
-
cell.title = text; // 保存日期在 title 属性
|
|
45
|
-
cell.className = 'day day_' + text;
|
|
46
|
-
cell.innerHTML = d + "";
|
|
47
|
-
let on = new Date(this.year, this.month - 1, d);
|
|
48
|
-
// 判断是否今日
|
|
49
|
-
if (isSameDay(on, this.date)) {
|
|
50
|
-
cell.classList.add('onToday');
|
|
51
|
-
// this.onToday && this.onToday(cell);// 点击 今天 时候触发的事件
|
|
52
|
-
}
|
|
53
|
-
// 判断是否选择日期
|
|
54
|
-
// this.selectDay && this.onSelectDay && this.isSameDay(on, this.selectDay) && this.onSelectDay(cell);
|
|
55
|
-
}
|
|
56
|
-
}
|
|
57
|
-
row.appendChild(cell);
|
|
58
|
-
}
|
|
59
|
-
frag.appendChild(row);
|
|
60
|
-
}
|
|
61
|
-
// 先清空内容再插入
|
|
62
|
-
let tbody = this.$el.querySelector("table tbody");
|
|
63
|
-
tbody.innerHTML = '';
|
|
64
|
-
tbody.appendChild(frag);
|
|
65
|
-
},
|
|
66
|
-
/**
|
|
67
|
-
* 获取指定的日期
|
|
68
|
-
*
|
|
69
|
-
* @param dateType
|
|
70
|
-
* @param month
|
|
71
|
-
*/
|
|
72
|
-
getDate(dateType, month) {
|
|
73
|
-
let nowYear = this.date.getFullYear(), nowMonth = this.date.getMonth() + 1; // 当前日期
|
|
74
|
-
switch (dateType) {
|
|
75
|
-
case 'preMonth': // 上一月
|
|
76
|
-
this.date = new Date(nowYear, nowMonth - 2, 1);
|
|
77
|
-
break;
|
|
78
|
-
case 'nextMonth': // 下一月
|
|
79
|
-
this.date = new Date(nowYear, nowMonth, 1);
|
|
80
|
-
break;
|
|
81
|
-
case 'setMonth': // 指定月份
|
|
82
|
-
this.date = new Date(nowYear, month - 1, 1);
|
|
83
|
-
break;
|
|
84
|
-
case 'preYear': // 上一年
|
|
85
|
-
this.date = new Date(nowYear - 1, nowMonth - 1, 1);
|
|
86
|
-
break;
|
|
87
|
-
case 'nextYear': // 下一年
|
|
88
|
-
this.date = new Date(nowYear + 1, nowMonth - 1, 1);
|
|
89
|
-
break;
|
|
90
|
-
}
|
|
91
|
-
},
|
|
92
|
-
/**
|
|
93
|
-
*
|
|
94
|
-
*
|
|
95
|
-
* @param querySelectoreven
|
|
96
|
-
*/
|
|
97
|
-
setMonth(ev) {
|
|
98
|
-
let el = ev.target;
|
|
99
|
-
this.getDate('setMonth', Number(el.selectedOptions[0].value));
|
|
100
|
-
},
|
|
101
|
-
/**
|
|
102
|
-
* 获取空白的非上月天数 + 当月天数
|
|
103
|
-
*
|
|
104
|
-
* @param this
|
|
105
|
-
*/
|
|
106
|
-
getDateArr() {
|
|
107
|
-
let arr = [];
|
|
108
|
-
// 算出这个月1号距离前面的星期天有多少天
|
|
109
|
-
for (let i = 1, firstDay = new Date(this.year, this.month - 1, 1).getDay(); i <= firstDay; i++)
|
|
110
|
-
arr.push(0);
|
|
111
|
-
// 这个月有多少天。用上个月然后设置日子参数为 0,就可以得到本月有多天
|
|
112
|
-
for (let i = 1, monthDay = new Date(this.year, this.month, 0).getDate(); i <= monthDay; i++)
|
|
113
|
-
arr.push(i);
|
|
114
|
-
return arr;
|
|
115
|
-
},
|
|
116
|
-
/**
|
|
117
|
-
* 获取日期
|
|
118
|
-
*
|
|
119
|
-
* @param event
|
|
120
|
-
*/
|
|
121
|
-
pickDay(ev) {
|
|
122
|
-
let el = ev.target, date = el.title;
|
|
123
|
-
this.$emit('pickdate', date);
|
|
124
|
-
return date;
|
|
125
|
-
},
|
|
126
|
-
/**
|
|
127
|
-
*
|
|
128
|
-
* @param event
|
|
129
|
-
*/
|
|
130
|
-
pickupTime(event) {
|
|
131
|
-
let hour = this.$el.querySelector('.hour'), minute = this.$el.querySelector('.minute'), time = hour.selectedOptions[0].value + ':' + minute.selectedOptions[0].value;
|
|
132
|
-
this.$emit('pick-time', time);
|
|
133
|
-
}
|
|
134
|
-
}
|
|
135
|
-
};
|
|
136
|
-
/**
|
|
137
|
-
* 判断两个日期是否同一日
|
|
138
|
-
*
|
|
139
|
-
* @param d1
|
|
140
|
-
* @param d2
|
|
141
|
-
*/
|
|
142
|
-
function isSameDay(d1, d2) {
|
|
143
|
-
return (d1.getFullYear() == d2.getFullYear() && d1.getMonth() == d2.getMonth() && d1.getDate() == d2.getDate());
|
|
144
|
-
}
|
|
145
|
-
//# sourceMappingURL=Calendar.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Calendar.js","sourceRoot":"","sources":["../../../src/widget/calendar/Calendar.ts"],"names":[],"mappings":"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"}
|
|
@@ -1,210 +0,0 @@
|
|
|
1
|
-
// 日历选择器
|
|
2
|
-
.aj-form-calendar {
|
|
3
|
-
font-family : Verdana;
|
|
4
|
-
font-size : .8rem;
|
|
5
|
-
background-color : white;
|
|
6
|
-
border : 1px solid lightgray;
|
|
7
|
-
border-radius : 5px;
|
|
8
|
-
box-shadow : 0 5px 10px rgba(0, 0, 0, 0.2);
|
|
9
|
-
text-align : center;
|
|
10
|
-
width : 320px;
|
|
11
|
-
-webkit-user-select: none;
|
|
12
|
-
-moz-user-select : none;
|
|
13
|
-
user-select : none;
|
|
14
|
-
padding : 10px;
|
|
15
|
-
line-height : 1.5em;
|
|
16
|
-
|
|
17
|
-
a {
|
|
18
|
-
color: #1e5494;
|
|
19
|
-
text-decoration: none;
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
.selectYearMonth {
|
|
23
|
-
float: right;
|
|
24
|
-
width: 100px;
|
|
25
|
-
|
|
26
|
-
div {
|
|
27
|
-
display: inline-block;
|
|
28
|
-
}
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
.showCurrentYearMonth {
|
|
32
|
-
text-align: left;
|
|
33
|
-
color : lightgray;
|
|
34
|
-
font-size : 1.6rem;
|
|
35
|
-
padding : 5% 0;
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
table {
|
|
39
|
-
width : 100%;
|
|
40
|
-
border : 0;
|
|
41
|
-
border-spacing : 0;
|
|
42
|
-
border-collapse: collapse;
|
|
43
|
-
|
|
44
|
-
thead {
|
|
45
|
-
tr {
|
|
46
|
-
color : #acacac;
|
|
47
|
-
border-bottom: 1px solid lightgray;
|
|
48
|
-
margin-bottom: 15px;
|
|
49
|
-
}
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
td {
|
|
53
|
-
font-size : .8rem;
|
|
54
|
-
padding : .4rem;
|
|
55
|
-
letter-spacing : 1px;
|
|
56
|
-
border : 0;
|
|
57
|
-
background-color: white;
|
|
58
|
-
text-align : center;
|
|
59
|
-
|
|
60
|
-
&.day {
|
|
61
|
-
cursor : pointer;
|
|
62
|
-
transition: background-color 190ms ease-in-out;
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
&.onToday {
|
|
66
|
-
font-weight: bold;
|
|
67
|
-
color : #C60;
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
&.onSelect {
|
|
71
|
-
font-weight: bold;
|
|
72
|
-
}
|
|
73
|
-
|
|
74
|
-
&.day:hover {
|
|
75
|
-
color : darken(#e0ecf9, 50%);
|
|
76
|
-
background-color: #e9e9e9;
|
|
77
|
-
}
|
|
78
|
-
}
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
.idCalendarPre,
|
|
82
|
-
.idCalendarNext {
|
|
83
|
-
cursor : pointer;
|
|
84
|
-
font-size : 1.2rem;
|
|
85
|
-
text-align : center;
|
|
86
|
-
border-radius: 3px;
|
|
87
|
-
padding : 2px 5px;
|
|
88
|
-
|
|
89
|
-
&:hover {
|
|
90
|
-
background-color: #e9e9e9;
|
|
91
|
-
}
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
.idCalendarPre {
|
|
95
|
-
float: left;
|
|
96
|
-
}
|
|
97
|
-
|
|
98
|
-
.idCalendarNext {
|
|
99
|
-
float: right;
|
|
100
|
-
}
|
|
101
|
-
|
|
102
|
-
.btns {
|
|
103
|
-
position: absolute;
|
|
104
|
-
left : 15px;
|
|
105
|
-
bottom : 5px;
|
|
106
|
-
|
|
107
|
-
input[type=button] {
|
|
108
|
-
font-size: .8rem;
|
|
109
|
-
padding : 2px 4px;
|
|
110
|
-
margin : 1px;
|
|
111
|
-
}
|
|
112
|
-
}
|
|
113
|
-
.showTime{
|
|
114
|
-
margin-top: 5%;
|
|
115
|
-
select {
|
|
116
|
-
min-width:50px;
|
|
117
|
-
text-align: center;
|
|
118
|
-
}
|
|
119
|
-
}
|
|
120
|
-
}
|
|
121
|
-
|
|
122
|
-
// 日历 悬浮出现
|
|
123
|
-
.aj-form-calendar-input {
|
|
124
|
-
position: relative;
|
|
125
|
-
width : 125px;
|
|
126
|
-
line-height: 19px;
|
|
127
|
-
|
|
128
|
-
&.show-time {
|
|
129
|
-
width: 170px;
|
|
130
|
-
}
|
|
131
|
-
|
|
132
|
-
display: inline-block;
|
|
133
|
-
|
|
134
|
-
input[type=text] {
|
|
135
|
-
// .aj-input-base();
|
|
136
|
-
max-width: 100% ! important;
|
|
137
|
-
width : 100% ! important;
|
|
138
|
-
|
|
139
|
-
}
|
|
140
|
-
|
|
141
|
-
.icon {
|
|
142
|
-
position : absolute;
|
|
143
|
-
width : 17px;
|
|
144
|
-
height : 16px;
|
|
145
|
-
right : 5px;
|
|
146
|
-
top : 6px;
|
|
147
|
-
opacity : .6;
|
|
148
|
-
cursor : pointer;
|
|
149
|
-
// .menu {
|
|
150
|
-
// color: #000;
|
|
151
|
-
// position: absolute;
|
|
152
|
-
// margin-left: 2px;
|
|
153
|
-
// margin-top: 8px;
|
|
154
|
-
// width: 17px;
|
|
155
|
-
// height: 1px;
|
|
156
|
-
// background-color: currentColor;
|
|
157
|
-
// &:before {
|
|
158
|
-
// content: '';
|
|
159
|
-
// position: absolute;
|
|
160
|
-
// top: -5px;
|
|
161
|
-
// left: 0;
|
|
162
|
-
// width: 17px;
|
|
163
|
-
// height: 1px;
|
|
164
|
-
// background-color: currentColor;
|
|
165
|
-
// }
|
|
166
|
-
//
|
|
167
|
-
// &:after {
|
|
168
|
-
// content: '';
|
|
169
|
-
// position: absolute;
|
|
170
|
-
// top: 5px;
|
|
171
|
-
// left: 0;
|
|
172
|
-
// width: 17px;
|
|
173
|
-
// height: 1px;
|
|
174
|
-
// background-color: currentColor;
|
|
175
|
-
// }
|
|
176
|
-
// }
|
|
177
|
-
}
|
|
178
|
-
|
|
179
|
-
.aj-form-calendar {
|
|
180
|
-
z-index : 999999999;
|
|
181
|
-
display : none;
|
|
182
|
-
position: absolute;
|
|
183
|
-
|
|
184
|
-
&.positionFixed {
|
|
185
|
-
// 若父元素 overflow:hidden,则 position: absolute 不能完整显示,故 fixed
|
|
186
|
-
position: fixed;
|
|
187
|
-
}
|
|
188
|
-
|
|
189
|
-
right: -3px;
|
|
190
|
-
top : 25px;
|
|
191
|
-
}
|
|
192
|
-
|
|
193
|
-
&:hover .aj-form-calendar,
|
|
194
|
-
.aj-form-calendar:hover {
|
|
195
|
-
display: block;
|
|
196
|
-
|
|
197
|
-
.icon {
|
|
198
|
-
opacity: .5;
|
|
199
|
-
}
|
|
200
|
-
}
|
|
201
|
-
|
|
202
|
-
&:hover .icon {
|
|
203
|
-
opacity: 1;
|
|
204
|
-
}
|
|
205
|
-
|
|
206
|
-
.selectYearMonth select {
|
|
207
|
-
min-width: 65px;
|
|
208
|
-
outline: none;
|
|
209
|
-
}
|
|
210
|
-
}
|
|
@@ -1,167 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* 日期选择器
|
|
3
|
-
*/
|
|
4
|
-
export default {
|
|
5
|
-
props: {
|
|
6
|
-
showTime: Boolean // 是否显示时间,即“时分秒”
|
|
7
|
-
},
|
|
8
|
-
data() {
|
|
9
|
-
let date: Date = new Date;
|
|
10
|
-
return {
|
|
11
|
-
date: date,
|
|
12
|
-
year: date.getFullYear(),
|
|
13
|
-
month: date.getMonth() + 1,
|
|
14
|
-
day: 1
|
|
15
|
-
};
|
|
16
|
-
},
|
|
17
|
-
mounted(): void {
|
|
18
|
-
this.$options.watch.date.call(this);
|
|
19
|
-
},
|
|
20
|
-
watch: {
|
|
21
|
-
date(): void {
|
|
22
|
-
this.year = this.date.getFullYear();
|
|
23
|
-
this.month = this.date.getMonth() + 1;
|
|
24
|
-
this.render();
|
|
25
|
-
}
|
|
26
|
-
},
|
|
27
|
-
methods: {
|
|
28
|
-
/**
|
|
29
|
-
* 画日历
|
|
30
|
-
*/
|
|
31
|
-
render(): void {
|
|
32
|
-
let arr: number[] = this.getDateArr(),// 用来保存日期列表
|
|
33
|
-
frag: DocumentFragment = document.createDocumentFragment();// 插入日期
|
|
34
|
-
|
|
35
|
-
while (arr.length) {
|
|
36
|
-
let row: HTMLTableRowElement = document.createElement("tr"); // 每个星期插入一个 tr
|
|
37
|
-
|
|
38
|
-
for (let i = 1; i <= 7; i++) { // 每个星期有7天
|
|
39
|
-
let cell: HTMLTableCellElement = document.createElement("td");
|
|
40
|
-
|
|
41
|
-
if (arr.length) {
|
|
42
|
-
let d: number = arr.shift();
|
|
43
|
-
|
|
44
|
-
if (d) {
|
|
45
|
-
let text: string = this.year + '-' + this.month + '-' + d;
|
|
46
|
-
cell.title = text; // 保存日期在 title 属性
|
|
47
|
-
cell.className = 'day day_' + text;
|
|
48
|
-
cell.innerHTML = d + "";
|
|
49
|
-
|
|
50
|
-
let on: Date = new Date(this.year, this.month - 1, d);
|
|
51
|
-
|
|
52
|
-
// 判断是否今日
|
|
53
|
-
if (isSameDay(on, this.date)) {
|
|
54
|
-
cell.classList.add('onToday');
|
|
55
|
-
// this.onToday && this.onToday(cell);// 点击 今天 时候触发的事件
|
|
56
|
-
}
|
|
57
|
-
// 判断是否选择日期
|
|
58
|
-
// this.selectDay && this.onSelectDay && this.isSameDay(on, this.selectDay) && this.onSelectDay(cell);
|
|
59
|
-
}
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
row.appendChild(cell);
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
frag.appendChild(row);
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
// 先清空内容再插入
|
|
69
|
-
let tbody = <HTMLElement>this.$el.querySelector("table tbody");
|
|
70
|
-
tbody.innerHTML = '';
|
|
71
|
-
tbody.appendChild(frag);
|
|
72
|
-
},
|
|
73
|
-
|
|
74
|
-
/**
|
|
75
|
-
* 获取指定的日期
|
|
76
|
-
*
|
|
77
|
-
* @param dateType
|
|
78
|
-
* @param month
|
|
79
|
-
*/
|
|
80
|
-
getDate(dateType: 'preMonth' | 'nextMonth' | 'setMonth' | 'preYear' | 'nextYear', month: number): void {
|
|
81
|
-
let nowYear: number = this.date.getFullYear(),
|
|
82
|
-
nowMonth: number = this.date.getMonth() + 1; // 当前日期
|
|
83
|
-
|
|
84
|
-
switch (dateType) {
|
|
85
|
-
case 'preMonth':// 上一月
|
|
86
|
-
this.date = new Date(nowYear, nowMonth - 2, 1);
|
|
87
|
-
break;
|
|
88
|
-
case 'nextMonth':// 下一月
|
|
89
|
-
this.date = new Date(nowYear, nowMonth, 1);
|
|
90
|
-
break;
|
|
91
|
-
case 'setMonth':// 指定月份
|
|
92
|
-
this.date = new Date(nowYear, month - 1, 1);
|
|
93
|
-
break;
|
|
94
|
-
case 'preYear':// 上一年
|
|
95
|
-
this.date = new Date(nowYear - 1, nowMonth - 1, 1);
|
|
96
|
-
break;
|
|
97
|
-
case 'nextYear':// 下一年
|
|
98
|
-
this.date = new Date(nowYear + 1, nowMonth - 1, 1);
|
|
99
|
-
break;
|
|
100
|
-
}
|
|
101
|
-
},
|
|
102
|
-
|
|
103
|
-
/**
|
|
104
|
-
*
|
|
105
|
-
*
|
|
106
|
-
* @param querySelectoreven
|
|
107
|
-
*/
|
|
108
|
-
setMonth(ev: Event): void {
|
|
109
|
-
let el: HTMLSelectElement = <HTMLSelectElement>ev.target;
|
|
110
|
-
this.getDate('setMonth', Number(el.selectedOptions[0].value));
|
|
111
|
-
},
|
|
112
|
-
|
|
113
|
-
/**
|
|
114
|
-
* 获取空白的非上月天数 + 当月天数
|
|
115
|
-
*
|
|
116
|
-
* @param this
|
|
117
|
-
*/
|
|
118
|
-
getDateArr(): number[] {
|
|
119
|
-
let arr: number[] = [];
|
|
120
|
-
|
|
121
|
-
// 算出这个月1号距离前面的星期天有多少天
|
|
122
|
-
for (let i = 1, firstDay: number = new Date(this.year, this.month - 1, 1).getDay(); i <= firstDay; i++)
|
|
123
|
-
arr.push(0);
|
|
124
|
-
|
|
125
|
-
// 这个月有多少天。用上个月然后设置日子参数为 0,就可以得到本月有多天
|
|
126
|
-
for (let i = 1, monthDay: number = new Date(this.year, this.month, 0).getDate(); i <= monthDay; i++)
|
|
127
|
-
arr.push(i);
|
|
128
|
-
|
|
129
|
-
return arr;
|
|
130
|
-
},
|
|
131
|
-
|
|
132
|
-
/**
|
|
133
|
-
* 获取日期
|
|
134
|
-
*
|
|
135
|
-
* @param event
|
|
136
|
-
*/
|
|
137
|
-
pickDay(ev: Event): string {
|
|
138
|
-
let el: HTMLElement = <HTMLElement>ev.target,
|
|
139
|
-
date: string = el.title;
|
|
140
|
-
this.$emit('pickdate', date);
|
|
141
|
-
|
|
142
|
-
return date;
|
|
143
|
-
},
|
|
144
|
-
|
|
145
|
-
/**
|
|
146
|
-
*
|
|
147
|
-
* @param event
|
|
148
|
-
*/
|
|
149
|
-
pickupTime(event: Event): void {
|
|
150
|
-
let hour: HTMLSelectElement = <HTMLSelectElement>this.$el.querySelector('.hour'),
|
|
151
|
-
minute: HTMLSelectElement = <HTMLSelectElement>this.$el.querySelector('.minute'),
|
|
152
|
-
time = hour.selectedOptions[0].value + ':' + minute.selectedOptions[0].value;
|
|
153
|
-
|
|
154
|
-
this.$emit('pick-time', time);
|
|
155
|
-
}
|
|
156
|
-
}
|
|
157
|
-
};
|
|
158
|
-
|
|
159
|
-
/**
|
|
160
|
-
* 判断两个日期是否同一日
|
|
161
|
-
*
|
|
162
|
-
* @param d1
|
|
163
|
-
* @param d2
|
|
164
|
-
*/
|
|
165
|
-
function isSameDay(d1: Date, d2: Date): boolean {
|
|
166
|
-
return (d1.getFullYear() == d2.getFullYear() && d1.getMonth() == d2.getMonth() && d1.getDate() == d2.getDate());
|
|
167
|
-
}
|
|
@@ -1,52 +0,0 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<div class="aj-form-calendar">
|
|
3
|
-
<div class="selectYearMonth">
|
|
4
|
-
<a href="###" @click="getDate('preYear')" class="preYear" title="上一年"> « <!-- < --></a>
|
|
5
|
-
<select @change="setMonth" v-model="month">
|
|
6
|
-
<option value="1">一月</option>
|
|
7
|
-
<option value="2">二月</option>
|
|
8
|
-
<option value="3">三月</option>
|
|
9
|
-
<option value="4">四月</option>
|
|
10
|
-
<option value="5">五月</option>
|
|
11
|
-
<option value="6">六月</option>
|
|
12
|
-
<option value="7">七月</option>
|
|
13
|
-
<option value="8">八月</option>
|
|
14
|
-
<option value="9">九月</option>
|
|
15
|
-
<option value="10">十月</option>
|
|
16
|
-
<option value="11">十一月</option>
|
|
17
|
-
<option value="12">十二月</option>
|
|
18
|
-
</select>
|
|
19
|
-
<a href="###" @click="getDate('nextYear')" class="nextYear" title="下一年"> »<!-- > --> </a>
|
|
20
|
-
</div>
|
|
21
|
-
<div class="showCurrentYearMonth">
|
|
22
|
-
<span class="showYear">{{year}}</span>/<span class="showMonth">{{month}}</span>
|
|
23
|
-
</div>
|
|
24
|
-
<table>
|
|
25
|
-
<thead>
|
|
26
|
-
<tr>
|
|
27
|
-
<td>日</td>
|
|
28
|
-
<td>一</td>
|
|
29
|
-
<td>二</td>
|
|
30
|
-
<td>三</td>
|
|
31
|
-
<td>四</td>
|
|
32
|
-
<td>五</td>
|
|
33
|
-
<td>六</td>
|
|
34
|
-
</tr>
|
|
35
|
-
</thead>
|
|
36
|
-
<tbody @click="pickDay"></tbody>
|
|
37
|
-
</table>
|
|
38
|
-
<div v-if="showTime" class="showTime">
|
|
39
|
-
时 <select class="hour aj-select">
|
|
40
|
-
<option v-for="n in 24" :key="n">{{n}}</option>
|
|
41
|
-
</select>
|
|
42
|
-
分 <select class="minute aj-select">
|
|
43
|
-
<option v-for="n in 61" :key="n">{{n - 1}}</option>
|
|
44
|
-
</select>
|
|
45
|
-
<a href="#" @click="pickupTime">选择时间</a>
|
|
46
|
-
</div>
|
|
47
|
-
</div>
|
|
48
|
-
</template>
|
|
49
|
-
|
|
50
|
-
<script lang="ts" src="./Calendar.ts"></script>
|
|
51
|
-
|
|
52
|
-
<style lang="less" scoped src="./Calendar.less"></style>
|