ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

2021-09-22

2021-09-22 11:59:39  阅读:156  来源: 互联网

标签:return 22 timestamp startTimestamp 09 60 2021 Date const


基于Elementui 日期时间选择器有关问题实现

需求开始时间控制结束时间范围

//HTML部分
  <div class="demoWrapper-condition-list">
          <el-date-picker
            v-model="startTime"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetime"
            :picker-options="startDateTime"
            placeholder="开始日期时间"
          >
          </el-date-picker>
          <el-date-picker
            v-model="endTime"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            :picker-options="endDateTime"
            placeholder="结束日期时间"
          >
          </el-date-picker>
        </div>
// JS部分
export default {
        data() {
          return {
             startTime: '',
             endTime: '',
         }
 }
computed: {
    startDateTime() {
      // 动态起始时间  
      // Date.now() 获取当前日期
      // disabledDate    设置禁用状态,参数为当前日期,要求返回 Boolean
      const startTimestamp = Date.now() * 1 - 24 * 60 * 60 * 1000;
      const endTimestamp =Date.parse(this.endTime) * 1 - 24 * 60 * 60 * 1000;
      return {
        disabledDate(time) {
          const timestamp = time.getTime();
          if (endTimestamp) {
            if (timestamp >= startTimestamp && timestamp <= endTimestamp) {
              return false;
            } else {
              return true;
            }
          } else {
            return timestamp <= startTimestamp;
          }
        },
      };
    },
    endDateTime() {
      // 动态起始时间
      const startTimestamp = Date.parse(this.startTime) * 1;
      return {
        disabledDate(time) {
          const timestamp = time.getTime();
          if (timestamp >= startTimestamp) {
            return false;
          }
          return true;
        },
      };
    },
  },

标签:return,22,timestamp,startTimestamp,09,60,2021,Date,const
来源: https://blog.csdn.net/Yupiece/article/details/120412300

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有