el-date-picker快捷选择

el-date-picker快捷选择

在这里插入图片描述

<el-date-picker
    v-model="form.dateStateEnd"
    type="daterange"
    :picker-options="pickerOptions"
    unlink-panels
    value-format="yyyy-MM-dd"
    range-separator="至"
    start-placeholder="注册开始日期"
    end-placeholder="注册结束日期"
    >
</el-date-picker>
data() {
    return {
    pickerOptions: {
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              end.setTime(start.getTime() - 3600 * 1000 * 24);
              start.setTime(start.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "过去7天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "过去30天",
            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 now = new Date();
              var nowYear = now.getYear();
              const end = new Date();
              nowYear += nowYear < 2000 ? 1900 : 0;
              const start = new Date(
                nowYear,
                now.getMonth(),
                now.getDate() - now.getDay() + 1
              );
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "本月",
            onClick(picker) {
              const now = new Date();
              var nowYear = now.getYear();
              const end = new Date();
              nowYear += nowYear < 2000 ? 1900 : 0;
              const start = new Date(nowYear, now.getMonth(), 1);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "上月",
            onClick(picker) {
              var nowDate = new Date();
              var year = nowDate.getFullYear();
              var month = nowDate.getMonth();
              if (month == 0) {
                month = 12;
                year = year - 1;
              }
              var lastDay = new Date(year, month, 0);
              const start = new Date(year + "-" + month + "-" + 1);
              const end = new Date(
                year + "-" + month + "-" + lastDay.getDate()
              );
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
    }
    }
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
el-date-pickerElement UI库中的日期选择器组件,picker-options是该组件的配置选项。 使用picker-options可以对日期选择器进行个性化的设置,包括但不限于以下选项: 1. disabledDate:自定义禁用日期的函数,可以根据具体需求设置某些日期不可选。 2. shortcuts:预设快捷选项,可以快速选择常用的日期范围。 3. format:指定日期的显示格式,默认为yyyy-MM-dd。 4. clearable:是否显示清空按钮,默认为true。 5. readonly:是否为只读状态,默认为false。 6. editable:是否可输入,默认为true。 7. align:对齐方式,可选值为left、center、right,默认为left。 8. popperClass:自定义弹出框样式的类名。 9. pickerOptions:配置日期选择器弹出框的选项,例如禁用时间、时间间隔等。 示例代码如下: ```html <el-date-picker v-model="date" :picker-options="{ disabledDate: (time) => { return time.getTime() < Date.now(); // 禁用过去的日期 }, shortcuts: [ { text: '最近一周', onClick: () => { const start = new Date(); const end = new Date(); start.setDate(start.getDate() - 6); this.date = [start, end]; } }, { text: '最近一个月', onClick: () => { const start = new Date(); const end = new Date(); start.setMonth(start.getMonth() - 1); this.date = [start, end]; } } ], format: 'yyyy-MM-dd', clearable: true, readonly: false, editable: true, align: 'left', popperClass: 'my-popper-class', pickerOptions: { disabledMinutes: [0, 30] // 禁用0分和30分 } }" ></el-date-picker> ``` 以上是一些常见的picker-options选项,你可以根据自己的需求进行配置。更多详细的选项和用法,请参考Element UI官方文档。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值