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>
  • 相关阅读:
    as3 绕中心点旋转
    TweenMax
    As3支持的Html标签一览
    AS3.0 静音和停止所有声音
    as3 如何判断同时按下两个键
    前置窗体
    系统音效控制
    LocalConnection
    as3代码实现调用摄像头
    air 加载网页
  • 原文地址:https://www.cnblogs.com/lingnweb/p/14277267.html
Copyright © 2011-2022 走看看