HTML 代码块:
<el-date-picker
v-model="value1"
type="datetimerange"
range-separator="至"
:start-placeholder="formInline.start_time"
:end-placeholder="formInline.end_time"
@change="changeTime"
@blur="selctTime"
value-format="yyyy-MM-dd"
>
</el-date-picker>
data数据声明: formInline: {
start_time:“”,
end_time:“”
},
value1:“”
js 模块:
// 判断默认值不能超过当日一个月幅度
changeTime(val) {
if (new Date(val[1]) - new Date(val[0]) > 1 * 24 * 60 * 60 * 1000 * 30) {
this.$message({
message: "起始结束日期幅度不能超过一个月",
type: "warning",
});
this.value1 = "";
} else {
this.formInline.start_time = val[0];
this.formInline.end_time_time = val[1];
this.$forceUpdate() //这行可有可无
}
},
//获取默认值 当天,以及过去三十天
weekBefore() {
const weekBefore = moment().subtract(30, "days").format("YYYY-MM-DD"); // 近三十日日期
const today = moment().format("YYYY-MM-DD"); //当前日期
this.formInline.start_time = weekBefore;
this.formInline.end_time = today;
},
//重置表单 有一个重置按钮 你们可以把这个位置用在请求接口拿到数据赋值开始时间结束时间
resetting(){
this.formInline={
start_time: "",
end_time: "",
}
this.formInline.start_time= moment().subtract(30, "days").format("YYYY-MM-DD"); // 近三十日日期
this.formInline.end_time= moment().format("YYYY-MM-DD"); //当前日期
this.$set(this.value1, 0, this.formInline.start_time); //赋值 直接赋值不生效
this.$set(this.value1, 1, this.formInline.end_time);//赋值 直接赋值不生效
},