element 时间选择器(跨日,月,年)

当前日 getDate()

当前月getMonth()

当前年 getFullYear()

html

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.15.6/lib/index.js"></script>
<div id="app">
<template>
  <div class="block">
    <span class="demonstration">时间范围选择</span>
    <el-date-picker
      v-model="value2"
      type="daterange"
      align="right"
      unlink-panels
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      :picker-options="pickerOptions">
    </el-date-picker>
  </div>
</template>
</div>

css

@import url("//unpkg.com/element-ui@2.15.6/lib/theme-chalk/index.css");

js

var Main = {
    data() {
      return {
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              end.setDate(start.getDate() - 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              end.setMonth(start.getMonth() - 1);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
             end.setMonth(start.getMonth() - 3);
              picker.$emit('pick', [start, end]);
            }
          },{
            text: '最近一年',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              end.setFullYear(start.getFullYear() - 1);
              picker.$emit('pick', [start, end]);
            }
          }{
            text: '最近三年',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              end.setFullYear(start.getFullYear() - 3);
              picker.$emit('pick', [start, end]);
            }
          },{
            text: '最近五年',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              end.setFullYear(start.getFullYear() - 5);
              picker.$emit('pick', [start, end]);
            }
          },{
            text: '最近十年',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              end.setFullYear(start.getFullYear() - 10);
              picker.$emit('pick', [start, end]);
            }
          }
                     ]
        },
        value2: ''
      };
    }
  };
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

没有用时间戳获取年月日(3600*24*天数)可以避免闰年与平年的天数不一样计算误差的问题

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值