Element 之DatePicker 时间选择器

简单记录日期选择器， 日期间隔60天的时间选择器逻辑处理 

•  html

<el-form-item label="开票时间">
        <el-col :span="11">
          <el-form-item prop="SatrtTime">
            <el-date-picker
              type="date"
              placeholder="开票开始时间"
              value-format="yyyy-MM-dd"
              unlink-panels
              @change="setSatrtTime"
              v-model="formInline.SatrtTime"
              :picker-options="startTimePicker"
              style="width: 100%;"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col class="line" :span="1">-</el-col>
        <el-col :span="11">
          <el-form-item prop="EndTime">
            <el-date-picker
              type="date"
              placeholder="开票结束时间"
              value-format="yyyy-MM-dd"
              unlink-panels
              @change="setEndTime"
              v-model="formInline.EndTime"
              :picker-options="endTimePicker"
              style="width: 100%;"
            ></el-date-picker>
          </el-form-item>
        </el-col>
      </el-form-item>

• js

 computed: {
    /** 开始时间 监听  两个相邻日期间隔时间： 24*60*60*1000  */

    startTimePicker(){     
      return {
        disabledDate: time => {            
            if(this.formInline.EndTime!=null&&this.formInline.EndTime!="") {             
                return time.getTime() > Date.now() //今天之后的日期不可选
                 || time.getTime() >= this.$util.formatDateTimestamp(this.formInline.EndTime) // 开始日期之前的日期不可选
                || time.getTime() < this.$util.formatDateTimestamp(this.formInline.EndTime) - ( 24*60*60*1000*60 ) 
            }else{
               return time.getTime() > Date.now()
            }             
        }
      }
    },
    /** 开票时间 - 结束时间 监听 */
    endInvoiceTimePicker(){
        return {
        disabledDate: time => {
          if(this.formInline.SatrtTime!=""&&this.formInline.SatrtTime!=null){
              return  time.getTime() > Date.now() //今天之后的日期不可选
              || time.getTime() <= this.$util.formatDateTimestamp(this.formInline.SatrtTime) -( 24*60*60*1000 ) // 开始日期之前的日期不可选
              || time.getTime() > this.$util.formatDateTimestamp(this.formInline.SatrtTime) + ( 24*60*60*1000*59 )
          }else{
             return time.getTime() > Date.now()
          }                       
        }
      }
    }

  },
  methods: {
     /** 设置开票开始时间 */
    setSatrtTime(val) {
      
    },
    /** 设置开票结束时间 */
    setEndTime(val) {           
      
    }
}

 

• util .js

const formatDateTimestamp = (date) => {
  var dd = new Date(date);
  return dd.getTime(dd)
}

const util = {
    formatDateTimestamp 
}
export default util