网站建设工作总结培训上海对外经贸大学

需求

el-date-picker 日期时间选择器如何设置默认开始时间为00:00:00，结束时间为23:59:59？

解决办法

可以通过动态绑定default-time属性来指定默认的开始时间和结束时间。

（1）vue3写法

模板页面表单

<el-form-item label="创建时间" prop="time"><el-date-pickerstart-placeholder="开始时间"range-separator="至"end-placeholder="结束时间"type="datetimerange"v-model="queryParams.time"value-format="YYYY-MM-DD HH:mm:ss":default-time="queryParams.defaultTimeArr"></el-date-picker>
</el-form-item>

响应式数据定义

const data = reactive({queryParams: {...time:[],defaultTimeArr:[new Date(0,0,0,0,0,0), new Date(0,0,0,23,59,59)],},
});

（2）vue2写法

模板页面表单

<el-form-item label="生成时间" prop="time"><el-date-pickerend-placeholder="结束日期"range-separator="至"start-placeholder="开始日期"type="datetimerange"v-model="formData.time"value-format="YYYY-MM-DD HH:mm:ss":default-time="defaultTimeArr"></el-date-picker>
</el-form-item>

变量定义

data () {return {...time:[],defaultTimeArr:[new Date(0,0,0,0,0,0), new Date(0,0,0,23,59,59)],}
}