element日期选择器,时间范围设置为一周,vue中的写法
1.首先引入插件,我用的是<el-date-pickerv-model="dateArr"value-format="yyyy-MM-dd"type="daterange":clearable="false"range-separator="至"start-placeholder="开始日期"end-placeholder="结束日期"
·
1.首先引入插件,我用的是
<el-date-picker
v-model="dateArr"
value-format="yyyy-MM-dd"
type="daterange"
:clearable="false"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
@change="changeDate"
></el-date-picker>
绑定了一个chenge事件。此事件需要在data中定义一个数组。因为我们是两个日期的选择
data(){
return{
dataArr:[]
}
}
methods中写入方法
// 日期选择器change事件
changeDate() {
// 获取数据
this.getWarningData();
}
getWarningData() {
deliveredApi
.getWarningData({
sTime: this.dateArr[0],
eTime: this.dateArr[1],
})
重点就是接下来的时间代码
getNewDate() {
var date = new Date();
// 获取月日
var month = date.getMonth() + 1;
var strDate = date.getDate();
if (month >= 1 && month <= 9) {
month = "0" + month;
}
if (strDate >= 0 && strDate <= 9) {
strDate = "0" + strDate;
}
// 拼接年月日
var headerDate = date.getFullYear() + "-" + month + "-" + strDate;
// 判断是否是新的一天,是的话重新刷新页面
if (this.headerDate !== undefined && this.headerDate !== headerDate) {
// 是新的一天,刷新页面
this.airportId = "";
this.getWeekDate();
setTimeout(() => {
// 获取信息
this.getWarningData();
}, 500);
// location.reload();
}
// 绑定到Date中
this.headerDate = headerDate;
// 获取时分秒
var h = date.getHours();
h = h < 10 ? "0" + h : h;
var minute = date.getMinutes();
minute = minute < 10 ? "0" + minute : minute;
var second = date.getSeconds();
second = second < 10 ? "0" + second : second;
// 拼接时分秒
var headerTime = h + ":" + minute + ":" + second;
// 绑定到Date中
this.headerTime = headerTime;
},
created中获取日期,且需要刷新
created() {
// 获取当前日期
this.getNewDate();
// 获取当前日期,每秒获取一次
setInterval(() => {
this.getNewDate();
}, 1000);
// 获取今天和七天前的日期
this.getWeekDate();
},
更多推荐
已为社区贡献4条内容
所有评论(0)