element-admin中使用el-date-picker

最新推荐文章于 2024-09-09 09:58:06 发布

hifhf

最新推荐文章于 2024-09-09 09:58:06 发布

阅读量1k

点赞数

分类专栏： web前端文章标签： git gitee python 前端

本文链接：https://blog.csdn.net/hifhf/article/details/121488578

版权

web前端专栏收录该内容

13 篇文章 1 订阅

订阅专栏

这篇博客详细介绍了如何在Element UI的日期选择器组件中设置快捷选项，包括当天、最近一周、最近一个月和最近一年。通过`picker-options`属性自定义快捷方式，并确保使用`value-format`属性来正确格式化时间。在使用时要注意，由于element-admin中Vue版本较低，应避免使用`shortcuts`属性，而应使用`picker-options`。

摘要由CSDN通过智能技术生成

<el-date-picker
    v-model="listSearch.date"
    type="daterange"
    unlink-panels
    range-separator="至"
    start-placeholder="开始日期"
    end-placeholder="结束日期"
    value-format="yyyy-MM-dd HH:mm:ss"
    :picker-options="pickerOptions"
    style="margin-left: 10px;width:300px"
    >
</el-date-picker>

pickerOptions: {
        shortcuts: [{
          text: '当天',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime());
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一年',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 365);
            picker.$emit('pick', [start, end]);
          }
        }]
      },

value-format="yyyy-MM-dd HH:mm:ss"不能少，否则传递的时间不正确

使用:picker-options="pickerOptions"，不要使用:shortcuts="shortcuts"，后者没有效果，因为element-admin中vue的版本低