el_elementUI中DatePicker 日期选择器使用时间限制

在vue.js的项目中,使用elementUI的DatePicker组件时,根据业务需求限制了可以选择的日期范围,仅允许选择2020年5月18日及之前的日期。通过封装工具类,实现了灵活的按年或按月限制日期选择的功能。
摘要由CSDN通过智能技术生成

限制一年和一年之前

因为业务要求,是按照月份导历史,所以我的查询条件是从 2020-05-18一直追到2019年五月一号,效果图如下
在这里插入图片描述

<template>
    <!--vue 时间选择控件测试-->
    <div class="hello">
        <div>
            选中的日期:{
   {
   startDate}}{
   {
   endDate}}
        </div>
        <div>
            时间范围:
            <el-radio
                    v-model="historyFlag"
                    @change="changeHistory"
                    label="D"
            >
                近一年</el-radio
            >
            <el-radio
                    v-model="historyFlag"
                    @change="changeHistory"
                    label="H"
            >
                历史</el-radio
            >
        </div>
        <div
        >
            <div >
                操作时间:<el-date-picker
                    v-model="dataPickerData.datePickerSpace"
                    type="daterange"
                    unlink-panels
                    :default-value="dataPickerData.limitDatePickerSpace"
                    value-format="yyyy-MM-dd"
                    range-separator="至"
                    start-placeholder="
               开始日期
              "
                    end-placeholder="结束日期"
                    :picker-options="
                historyFlag === 'D'
                  ? dataPickerData.limitCurrentTime
                  : dataPickerData.limitHistoryTime
              "
            >
            </el-date-picker>
            </div>
        </div>
    </div>
</template>

<script>
import formatUtil from "./formatUtil";
export default {
   
  name: 'DatePickerDemo',
  data () {
   
    return {
   
      startDate: "",
      endDate: "",
      // 历史选择变量
      historyFlag: "D",
      // 为了区分点击时候没有查询就导出,导致导出历史记录混乱的三方变量
      isSearchHistory: "D",
      dataPickerData: {
   
        // 日期时间选择数组【开始时间,结束时间】
        datePickerSpace: null,
        // 日期选择数组空间可选范围控制
        limitDatePickerSpace: null,
        limitCurrentTime: {
   
          /**
           * 限制选择近1年的日期(去年的本月1日到今天)
           * @param time
           * @returns {boolean}
           */
          disabledDate: function(time) {
   
            // 不能超过当前时间
            if (new Date(time).getTime() > new Date().getTime()) {
   
              return time.getTime() >= new Date().getTime(); //时间范围必须是时间戳
            } else {
   
              // 因为项目要求是查找2019-04-01 到 2020-04-25(2020四月的一天)
              // 需要找出现在 2020-04-25 到 2019-04-01有多少天
              // 1.判断年,平年还是闰年
              let y = new Date().getFullYear() - 1;
              // 用年份除以4,如果没有余数就是闰年,如果有余数就是平年。
              let isLeap = (0 === y % 4 && 0 === y % 100) || 0 === y % 400;
              // 平年的2月是28天,闰年是的2月是29天 因此闰年比平年多一天
              // 2019 是 365天
              let days = isLeap ? 366 : 365;
              
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值