关于vue结合element-ui实现日期限制本年时间

最新推荐文章于 2024-05-30 11:27:58 发布

不会打代码的飞仔

最新推荐文章于 2024-05-30 11:27:58 发布

阅读量598

点赞数 8

分类专栏： elemnt-ui时间限制文章标签： vue.js

本文链接：https://blog.csdn.net/qq_57268984/article/details/121168734

版权

elemnt-ui时间限制专栏收录该内容

1 篇文章 0 订阅

订阅专栏

今天小编在项目做前后端分离vue项目时，结合elemnet-ui的情况下，遇到了时间限制本年的需求为选择时间限制本年，用到了element-ui的 <el-date-picker>组件，别的不说，直接上代码

 <el-date-picker
                v-model="formInline.begin_date"
                value-format="yyyy-MM-dd"
                type="month"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :picker-options="pickerOptions"
                @focus="TimedataBar"
              ></el-date-picker>
              --
              <el-date-picker
                v-model="formInline.end_date"
                value-format="yyyy-MM-dd"
                type="month"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @focus="TimedataBarOut"
                :picker-options="pickerOptionsOut" 
 ></el-date-picker>
<script>
   export default{
       data(){
            return{
              //开始时间限制值
               pickerOptions: {},
              //结束时间限制的值
              pickerOptionsOut: {},
            }
        },
        methoods{
           //开始时间的限制
    TimedataBar() {
      let now = new Date(); // 当前日期
      let nowYear = now.getFullYear(); //当前年
      let firstDay = new Date(nowYear, 0).getTime(); // 本年开始时间
      let LastDay = new Date(nowYear+1, -1).getTime(); // 本年结束时间
      this.pickerOptions = {
        disabledDate: (time) => {
          return  time.getTime() <firstDay ||  time.getTime() >LastDay;
        },
      };
    },
    //结束时间的限制
    TimedataBarOut() {
      let now = new Date(); // 当前日期
      let nowYear = now.getFullYear(); //当前年
      let firstDay = new Date(nowYear, 0).getTime(); // 本年开始时间
      let LastDay = new Date(nowYear+1, -1).getTime(); // 本年结束时间
      this.pickerOptionsOut = {
        disabledDate: (time) => {
          return time.getTime() <firstDay || time.getTime() >LastDay;
        },
      };
    },
        }
   }
</script>

完美解决，主要就是获取时间戳进行比较，如有错误或者需要改进的地方，请各位大神指教，