elementUI日期选择器组件（DatePicker）的使用-带快捷选项和开始、结束值的获取

最新推荐文章于 2025-03-06 17:47:49 发布

String佳佳

最新推荐文章于 2025-03-06 17:47:49 发布

阅读量6.8k

点赞数 2

本文链接：https://blog.csdn.net/weixin_44171757/article/details/88971620

版权

本文介绍了一个使用Element UI库中的日期选择器组件实现的具体案例，包括了HTML结构、JavaScript交互逻辑及快速选择区间功能的实现方式。通过示例代码展示了如何设置日期范围选择器的属性与事件监听。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图

在这里插入图片描述

html部分

<el-date-picker
                  v-model="detailDate"
                  type="daterange"
                  align="right"
                  unlink-panels
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  value-format="yyyyMMdd"
                  @change="dateChange"
                  :picker-options="pickerOptions2">
 </el-date-picker>

jq部分

<script>
export default {
	data() {
          return {
            detailDate:'',
            startTime: '',
            endTime: '',
            pickerOptions2: {
              shortcuts: [
                {
                  text: '最近一周',
                  onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 60 * 60 * 1000 * 24 * 7);
                    picker.$emit('pick', [start, end])
                  }
                },
                {
                  text: '最近一个月',
                  onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 30 * 24 * 60 * 60 * 1000);
                    picker.$emit('pick', [start, end])
                  }
                },
                {
                  text: '最近三个月',
                  onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3 * 30 * 24 * 60 * 60 * 1000);
                    picker.$emit('pick', [start, end])
                  }
                }
              ]
            }
          }
    },
    methods: {
	        dateChange(val) {
	            this.startTime = val.toString().split(",")[0]
	            this.endTime = val.toString().split(",")[1]
	          },
         }
}

</script>