zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    linux下使用svn
    [转]量变真的可以引起质变
    《自己动手写操作系统》pmtest2笔记
    Android-Java构造代码块&构造方法隐式三行
    Android-Java静态代码块&局部代码块
    Android-WebView与本地HTML (Java调用--->HTML的方法)-(new WebView(this)方式)
    Android-WebView加载网页(new WebView(this)方式)
    Android-Throwable: A WebView method was called on thread 'JavaBridge'.
    Android-WebView与本地HTML (互调)
    Android-WebView与本地HTML (Java调用--->HTML的方法)
  • 原文地址:https://www.cnblogs.com/lingnweb/p/14277267.html
Copyright © 2011-2022 走看看