Vue+java实现时间段的搜索示例 Vue+java实现时间段的搜索示例

【Vue+java实现时间段的搜索示例】实现效果如图：

文章图片

标红的是需要注意的地方！
Vue操作：
1，如图：

文章图片

2，如图：(数据初始化)

文章图片

2.0初始化今天的日期和时间的样式：
2.1今天的日期：

// 时间范围–start
// daterangeLastInTime: [],
// daterangeLastInTime: [new Date(2022, 2, 10, 0, 0), new Date(2022, 2, 10, 23, 59)],
daterangeLastInTime: [this.parseTime(new Date(new Date().toLocaleDateString()).getTime()),this.parseTime(new Date(new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1))],

2.2，时间的样式：

//时间样式(出现上面的效果图)pickerOptions: {shortcuts: [{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]); }}, {text: '最近三个月',onClick(picker) {const end = new Date(); const start = new Date(); start.setTime(start.getTime() - 3600 * 1000 * 24 * 90); picker.$emit('pick', [start, end]); }}]},

4，如图：把时间放入对应的值