iview和element中日期选择器快捷选项的定制控件

 

 

 

 公司的两个vue项目中都用到了iview和element这个框架,最近的两个需求都有关于日期选择的定制控件,就是要求日期选择的快捷选项左边栏有包含今日、昨日、本周、上周、最近一周、本月、上月、上季度、本季度、去年、今年,由于element官网中对于这样的快捷选项并不是很好,满足不了实际的场景需要,所以就要自己定制开发。上网查了一些文档,根据实际需求定制了如下的控件,由于iview和element类似,下面只介绍element框架,iview也可以直接套用。如果你的需求和我的类似,直接就可以拷贝,按照步骤操作即可实现。

  • 第一步:安装moment

moment.js是一个非常实用的JS日期工具类,例如对日期获取,格式化等操作都很方便,如果想进一步了解,可参考官网,地址如下:

官网地址:Moment.js 中文网

 

  • 第二步:在需要的日期页面中引入  
import moment from "moment";

 

  • 第三步:在属性 options 对象中的 shortcuts 可以设置快捷选项。  

注意:如果你的需求要求传递时分秒的话就把 HH:mm:ss 加上,如果仅仅是需要传递年月日,就直接删除  HH:mm:ss 即可。

      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();
            start.setTime(start.getTime() - 3600 * 1000 * 24)
            end.setTime(end.getTime() - 3600 * 1000 * 24)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '上周',
          onClick(picker) {
            const start = moment(moment().week(moment().week() - 1).startOf('week').add(1, 'days').valueOf()).format("YYYY-MM-DD HH:mm:ss")
            const end = moment(moment().week(moment().week() - 1).endOf('week').add(1, 'days').valueOf()).format("YYYY-MM-DD HH:mm:ss");
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '本周',
          onClick(picker) {
            const start = moment(moment().week(moment().week()).startOf('week').add(1, 'days').valueOf()).format("YYYY-MM-DD HH:mm:ss")
            const end = moment(moment().week(moment().week()).endOf('week').add(1, 'days').valueOf()).format("YYYY-MM-DD HH:mm:ss");
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '上月',
          onClick(picker) {
            const start = moment(moment().month(moment().month() - 1).startOf('month').valueOf()).format('YYYY-MM-DD');
            const end = moment(moment().month(moment().month() - 1).endOf('month').valueOf()).format('YYYY-MM-DD');
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '本月',
          onClick(picker) {
            const start = moment(moment().month(moment().month()).startOf('month').valueOf()).format('YYYY-MM-DD');
            const end = moment(moment().month(moment().month()).endOf('month').valueOf()).format('YYYY-MM-DD');
            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 start = moment(moment().quarter(moment().quarter() - 1).startOf('quarter').valueOf()).format('YYYY-MM-DD');
            const end = moment(moment().quarter(moment().quarter() - 1).endOf('quarter').valueOf()).format('YYYY-MM-DD');
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '本季度',
          onClick(picker) {
            const start = moment(moment().quarter(moment().quarter()).startOf('quarter').valueOf()).format('YYYY-MM-DD');
            const end = moment(moment().quarter(moment().quarter()).endOf('quarter').valueOf()).format('YYYY-MM-DD');
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '去年',
          onClick(picker) {
            const start = moment(moment().year(moment().year() - 1).startOf('year').valueOf()).format('YYYY-MM-DD');
            const end = moment(moment().year(moment().year() - 1).endOf('year').valueOf()).format('YYYY-MM-DD');
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '今年',
          onClick(picker) {
            const start = moment(moment().year(moment().year()).startOf('year').valueOf()).format('YYYY-MM-DD');
            const end = moment(moment().year(moment().year()).endOf('year').valueOf()).format('YYYY-MM-DD');
            picker.$emit('pick', [start, end])
          }
        }]
      }

 

  • 第四步:HTML中的代码写日期组件,下面可以直接拿来使用,如下:
        <el-col :span="16">
          <el-date-picker
            v-model="timeValue"
            type="daterange"
            align="right"
            unlink-panels
            size="small"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="selectDate"
            :picker-options="pickerOptions">
          </el-date-picker>
        </el-col>

 

第五步:在使用之前可以先在控制台打印出来,看是否符合自己的实际需求,如下:

   selectDate(date) {
    console.log(date[0]) // 开始时间
    console.log(data[1]) // 结束时间

  }

 

这些是element框架中使用的,iview框架同理,套用即可。

以上是我在实际开发中遇到的问题,希望看到这篇文章的小伙伴可以得到收获,有兴趣可以关注我,互相学习。

有问题也可留言,我会及时处理回答,谢谢。

 

原创不易,多谢支持!

 

posted @ 2019-10-24 16:46  海_哥_哥  阅读(1791)  评论(2编辑  收藏  举报