年之年的选择,组装版

javascript 复制代码
组件:
javascript 复制代码
<!--
 * @Author: liuyu liuyu@xizhengtech.com
 * @Date: 2023-02-01 16:57:27
 * @LastEditors: wangping wangping@xizhengtech.com
 * @LastEditTime: 2023-06-30 17:25:14
 * @Description: 时间选择年 - 年
-->
<template>
  <div class="year-range-picker">
    <el-date-picker v-model="dateList[0]" :clearable="false" type="year" placeholder="开始年" class="year-picker" format="yyyy" value-format="yyyy" :picker-options="startDatePicker" @change="getTime">
    </el-date-picker>
    <span class="range-word"> 至 </span>
    <el-date-picker v-model="dateList[1]" prefix-icon='0' type="year" placeholder="结束年" class="year-picker" value-format="yyyy" :picker-options="endDatePicker" @change="getTime">
    </el-date-picker>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dateList: [],
      startDatePicker: this.beginDate(),
      endDatePicker: this.processDate(),
      // 开始年度和结束年度 添加限制
      // startDatePicker: {
      //   disabledDate: (time) => {
      //     if (this.startDatePicker) {
      //       return (
      //         time.getTime() > this.startDatePicker ||
      //         time.getTime() > Date.now()
      //       );
      //     }
      //   },
      // },
      // endDatePicker: {
      //   disabledDate: (time) => {
      //     return (
      //       time.getTime() < this.endDatePicker ||
      //       time.getTime() > Date.now()
      //     );
      //   },
      // },
    };
  },
  created() {},
  watch: {
    // dateList(v) {
    //   this.$emit("input", v);
    // },
  },

  methods: {
    getTime(val) {
      console.log("但:", this.dateList);
      if (val == null) {
        this.dateList = [];
      }
      this.$emit("getTime", this.dateList);
    },
    // 选择年份范围选择时开始时间不能大于结束时间,结束时间不能小于开始时间
    // 提出开始时间必须小于提出结束时间
    beginDate() {
      let self = this;
      return {
        disabledDate(time) {
          if (self.dateList[1] !== "" && self.dateList[1] !== null) {
            let fixedTime = new Date(time);
            return fixedTime.getFullYear() > self.dateList[1];
          } else {
            return;
          }
        },
      };
    },
    // 提出结束时间必须大于提出开始时间
    processDate() {
      let self = this;
      return {
        disabledDate(time) {
          // let fixedTime = new Date(self.oldTime).getTime()
          // return time.getTime() < fixedTime
          let fixedTime = new Date(time);
          return fixedTime.getFullYear() < self.dateList[0];
        },
      };
    },
  },
};
</script>
<style lang="scss" scoped>
.year-range-picker {
  width: 260px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  display: flex;
  align-items: center;
  ::v-deep.el-date-editor {
    // .el-input__icon {
    //   display: none;
    // }
    .el-input__inner {
      border: none;
      text-align: center;
    }
  }
}
</style>
javascript 复制代码
使用:
javascript 复制代码
<YearYear @getTime="getTime"></YearYear>

 // 获取传过来的时间
getTime(val) {},
相关推荐
IT_陈寒18 分钟前
Java性能优化:从这8个关键指标开始,让你的应用提速50%
前端·人工智能·后端
天生我材必有用_吴用20 分钟前
Vue3+Node.js 实现大文件上传:断点续传、秒传、分片上传完整教程(含源码)
前端
摸鱼的春哥36 分钟前
前端程序员最讨厌的10件事
前端·javascript·后端
牧羊狼的狼5 小时前
React 中的 HOC 和 Hooks
前端·javascript·react.js·hooks·高阶组件·hoc
知识分享小能手6 小时前
React学习教程,从入门到精通, React 属性(Props)语法知识点与案例详解(14)
前端·javascript·vue.js·学习·react.js·vue·react
luckys.one6 小时前
第9篇:Freqtrade量化交易之config.json 基础入门与初始化
javascript·数据库·python·mysql·算法·json·区块链
魔云连洲6 小时前
深入解析:Vue与React的异步批处理更新机制
前端·vue.js·react.js
mCell7 小时前
JavaScript 的多线程能力:Worker
前端·javascript·浏览器
weixin_437830948 小时前
使用冰狐智能辅助实现图形列表自动点击:OCR与HID技术详解
开发语言·javascript·ocr
超级无敌攻城狮8 小时前
3 分钟学会!波浪文字动画超详细教程,从 0 到 1 实现「思考中 / 加载中」高级效果
前端