首页 > 其他 > 详细

element UI 制作带月份快捷选项的时间选择器

时间:2021-03-28 22:20:15      阅读:54      评论:0      收藏:0      [点我收藏+]

最近项目需要对element-ui的DateTimePicker日期选择器进行修改,改成带有月份快捷选项,可以选中月份后,快速获得该月的开始时间和结束时间,效果如图:

技术分享图片

代码如下:

       <el-date-picker
            class="time-select"
            v-model="time"
            value-format="yyyy-MM-dd hh:mm:ss"
            :picker-options="pickerOptions"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
       </el-date-picker>
  data() {
    return {
      pickerOptions: {
        shortcuts: []
        }
      }
  },
  mounted(){this.getMonth}
  methods: {
    getMonth() {
      const shortcuts = [];
      for (let i = 1; i <= 12; i++) {
        shortcuts.push({
          text: i + ‘月‘,
          onClick(picker) {
            //获取每月第一天的开始时间
            const start = new Date(new Date().getFullYear(), i - 1, 1);
            //获取每月最后一天的开始时间
            const end = new Date(new Date().getFullYear(), i, 0,23,59,59);
            picker.$emit(‘pick‘, [start, end]);
          }
        });
        this.pickerOptions = { shortcuts };
      }
    }
  }

 

element UI 制作带月份快捷选项的时间选择器

原文:https://www.cnblogs.com/leise/p/14589914.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!