网站的设计思路范文,免费装修设计图app,一人之下王也,企业培训师资格证背景
我们时常有时间范围选择#xff0c;需要选择一个开始时间和一个结束时间给后端#xff0c;但我们给后端的是两个字段#xff0c; 分别是开始时间和结束时间#xff0c;现在使用element绑定的值是一个数组#xff0c;我们还要来回处理#xff0c;很麻烦列表也的查询…背景
我们时常有时间范围选择需要选择一个开始时间和一个结束时间给后端但我们给后端的是两个字段 分别是开始时间和结束时间现在使用element绑定的值是一个数组我们还要来回处理很麻烦列表也的查询需要查询这个时间段范围内的数据 如下比如用户选择了2023-7-19 至 2023-8-15后端期望的是我们传递的开始时间是 2023-7-19 00:00:00 结束时间23-8-15 23:59:59因为这样才符合这个范围的选择8月15本就是应该包含的 实现
组件名 DateRangePicker
使用方法
vue3 DateRangePicker v-model:startTimedataForm.startTime v-model:endTimedataForm.endTime/DateRangePickervue2 DateRangePicker :startTime.syncdataForm.startTime :endTime.syncdataForm.endTime/DateRangePicker使用双向数据绑定 startTime 绑定开始时间endTime 绑定结束时间
代码如下
!-- --------------------------------------* 日期范围选择器、让element-ui绑定的数组分别对应对到 startTimeendTime 上exampleDateRangePicker v-model:startTimedataForm.startTime v-model:endTimedataForm.endTime/DateRangePicker
-------------------------------------- ---
templateel-date-picker:shortcutsrangeShortcutsv-bind$attrsv-modeldate:value-formatvalueFormat:typetypechangechange:start-placeholderstartPlaceholder:end-placeholderendPlaceholderclassDateRangePicker:range-separatorrangeSeparator/el-date-picker
/templatescript
import dayjs from dayjs
export default {name: DateRangePicker,emits: [update:startTime, update:endTime, change],props: {type: {// datetimerangetype: String,default: daterange,},startTime: [Number, String, Date],endTime: [Number, String, Date],valueFormat: {type: String,default: YYYY-MM-DD HH:mm:ss,},startPlaceholder: {type: String,default: 开始日期,},endPlaceholder: {type: String,default: 结束日期,},rangeSeparator: {default: —,},},data() {return {rangeShortcuts,date: undefined,};},computed: {watchDate() {return [this.startTime, this.endTime]}},watch: {watchDate: watchDateChangeHandler,},created() {this.watchDateChangeHandler();},methods: {change(val) {let startTime ;let endTime ;if (val Array.isArray(val)) {startTime val[0];if (this.type daterange) {endTime dayjs(val[1]).endOf(day).format(this.valueFormat)} else {endTime val[1];}console.log( endTime: , endTime)}this.$emit(update:startTime, startTime);this.$emit(update:endTime, endTime);this.$emit(change, val);},watchDateChangeHandler() {const { startTime, endTime } this;if ((startTime 0 || startTime) endTime) {this.date [startTime, endTime];} else {this.date undefined;}},},
};
/script
