闲暇时间记录一下项目中用到的框架以及遇到的问题
element-ui的DatePicker时间选择器使用(年月日)
- value-format是时间处理格式
1
2
3value-format="yyyy-MM-dd" //2018-12-27
value-format="yyyy-MM-dd HH:mm:ss" //2018-12-27 00:00:00
value-format="timestamp" // 1483326245000 - 只能选择今天以及之后的日期
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72<el-date-picker
style="width:178px"
size="mini"
v-model="addform.time"
type="date"
format="yyyy-MM-dd HH:mm:ss"
:picker-options="pickerOptions0"
placeholder="选择日期">
</el-date-picker>
<script>
data() {
return {
//默认日期 当天0点-当前时间 时间戳
addform: {
startTime: new Date(new Date().setHours(0, 0, 0, 0)).getTime(),
endTime: new Date().getTime(),
time: [new Date(new Date(new Date().setHours(0, 0, 0, 0))).getTime(), new Date().getTime()],
},
// 时间快捷选项
pickerOptions: {
shortcuts: [
{
text: "今天",
onClick(picker) {
const end = new Date();
const start = new Date();
picker.$emit("pick", [start, end]);
}
},
{
text: "昨天",
onClick(picker) {
const date = new Date();
date.setTime(date.getTime() - 3600 * 1000 * 24);
picker.$emit("pick", [date, date]);
}
},
{
text: "最近一周",
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit("pick", [start, end]);
}
},
{
text: "最近一个月",
onClick(picker) {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
picker.$emit("pick", [start, end]);
}
}
]
},
//选择今天以及之后的日期
pickerOptions0: {
disabledDate(time) {
return time.getTime() < Date.now() - 8.64e7;
}
},
//如果没有后面的-8.64e7就是选择除了今天之后的日期
pickerOptions1: {
disabledDate(time) {
return time.getTime() < Date.now();
},
},
}
<script> - 字符串
1
2
3
4
5
6
7
8
9
10
11
12
13startTime:
new Date().getFullYear() +
"-" +
(new Date().getMonth() + 1) +
"-" +
new Date().getDate() + ' ' + '00' + ':'+ '00' + ':'+ '00',
endTime:
new Date().getFullYear() +
"-" +
(new Date().getMonth() + 1).toString().padStart(2, "0") +
"-" +
new Date().getDate().toString().padStart(2, "0") +' '+ new Date().getHours().toString().padStart(2, "0") +':'+ new Date().getMinutes().toString().padStart(2, "0")+':'+ new Date().getSeconds().toString().padStart(2, "0") ,
time: [new Date(new Date().setHours(0, 0, 0, 0)), new Date()],重置时间
1
2
3
4
5reset(){
this.queryItem.time = [new Date(new Date(new Date().setHours(0, 0, 0, 0))).getTime(), new Date().getTime()];
this.queryItem.startTime= new Date(new Date().setHours(0, 0, 0, 0)).getTime();
this.queryItem.endTime=new Date().getTime();
},时间表单验证不超过多少小时
1
2
3
4
5
6
7
8
9
10
11
12
13const validatecreateTime = (rule, value, callback) => {
if (value) {
const utc = value[1] - value[0];
const time = utc / (60 * 60 * 1000);
if (time > 2) {
callback(new Error("时间选择跨度不能超过2小时")); //没有验证通过
} else {
callback(); //验证通过
}
} else {
callback(new Error("请选择时间")); //没有验证通过
}
};日历有时间则显示当天有数据的样式标记
- http://momentjs.cn/
- 引入moment时间日期处理插件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21import moment from "moment";
data(){
return{
existDate: ["2021-06-21"],
pickerOptions: {
cellClassName: time => {
if (this.existDate.includes(this.formatDate(time))) {
return "red";
}
}
},
}
}
<style>
.red {
background: blue;
color: white;
border-radius: 50%;
}
</style>
