• iview datetime日期时间限制


    <template>
    <div>
    <span>
                  <label>选择时间:</label>
                  <DatePicker
                    v-model="dateTimePicker[0]"
                    type="datetime"
                    @on-change="startTimeChange"
                    :options="startTimeOptions"
                    format="yyyy-MM-dd HH:mm:ss"
                    placeholder="请选择开始时间"></DatePicker>
                    ~
                  <DatePicker
                    v-model="dateTimePicker[1]"
                    type="datetime"
                    @on-change="endTimeChange"
                    :options="endTimeOptions"
                    format="yyyy-MM-dd HH:mm:ss"
                    placeholder="请选择结束时间"></DatePicker>
                </span>
    </div>
    </template>
    
    <script>
    export default {
    methods: {
    // 重置
        reset() {
          this.dateTimePicker = ['', ''];
          this.startTimeOptions = {
            disabledDate: date => {
              return ''
            }
          }
          this.endTimeOptions = {
            disabledDate: date => {
              return ''
            }
          }
    },
    startTimeChange: function(e) { //设置开始时间
          /*
            1.当结束时间为空或小于开始时间时,设置结束时间等于开始时间
            2.根据开始时间设置结束时间的disabled日期
              结束时间的不可选日期节点:
                1) 开始时间为00:00:00时 => 开始时间的00:00:00 - 1,即前一天的23:59:59
                2) 开始时间不等于00:00:00时 => 前一天?
          */
          if(!e) return false
          if(!this.dateTimePicker[1] || new Date(this.dateTimePicker[1]).valueOf() < new Date(e).valueOf()) {
            this.dateTimePicker[1] = e;
          }
          // let startTime = e ? new Date(e).valueOf() - 1 * 24 * 60 * 60 * 1000 : '';
          let endDisTime = 0; // 结束时间不可选时间节点
          let fristMS = new Date(new Date(e).toLocaleDateString()).valueOf(); // 开始时间的 00:00:00的毫秒数
          if(fristMS == new Date(e).valueOf()) { // 开始时间为00:00:00
            endDisTime = new Date(new Date(e).toLocaleDateString()).valueOf() - 1;
          } else {
            endDisTime = e ? new Date(e).valueOf() - 1 * 24 * 60 * 60 * 1000 : '';
          }
          this.endTimeOptions = {
            disabledDate: date => {
              return date && (date.valueOf() < endDisTime);
            }
          }
        },
        endTimeChange: function(e) { //设置结束时间
          let _this = this;
          let flag = false;
          // console.log(new Date(new Date(this.dateTimePicker[0]).toLocaleDateString()),new Date(new Date(e).toLocaleDateString()))
          if(!e || !this.dateTimePicker[0]) return false
          let endTime = new Date(e).valueOf();
          let startTime = new Date(this.dateTimePicker[0]).valueOf();
          if(startTime > endTime) {
            this.dateTimePicker[1] = this.dateTimePicker[0]
            flag = true
          }
          // let endTimepre = endTime + 1 * 24 * 60 * 60 * 1000;
          let endTimepre = new Date(new Date(e).toLocaleDateString()).valueOf() + 1 * 24 * 60 * 60 * 1000 - 1;
          this.startTimeOptions = {
            disabledDate(date) {
              return date && (flag ? '': date.valueOf() > endTimepre);
              // return date.valueOf() < startTime;
            }
          }
        },
    }
    }
    
    </script>
  • 相关阅读:
    如何将 CentOS 8 升级为 CentOS Stream 8
    在 Windows 中启用 NTP 时间同步服务并在 Linux 中设置时间同步
    在 linux 命令行中查询本机访问互联网使用的IP地址
    在 nginx 中配置 HSTS 并禁用 TLS 1.0、1.1
    使用 WinDbg 打开 Windows 蓝屏后转储 dmp 文件
    在 asp.net core 中,更换使用 Newtonsoft.Json 并阻止驼峰化命名
    .Net 线程内变量(数据存储)的方法
    使用 docker 部署 nextcloud
    如何为 docker 配置代理以提升访问速度或解决不可访问的问题
    使用 WinSW 将 Windows 下的软件程序转为服务
  • 原文地址:https://www.cnblogs.com/lingnweb/p/14277267.html
Copyright © 2020-2023  润新知