element 常用组件 ----- 日期组件

 <el-form-item label="最晚到货日期：" prop="arrivalDate">
   <el-date-picker
     placeholder="选择最晚到货日期"
     v-model="arrivalDate"
     value-format="yyyy-MM-dd"
     type="date"
     :editable = false
     :clearable = false
     :picker-options="pickerArrivalDate"
     @change="getDate">
  </el-date-picker>
 </el-form-item>

export default{
  data () {
    return {
      startDate:'',
      pickerArrivalDate:{
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7
          //return time.getTime() < this.startDate;
        }
      }
    }
  },
  methods:{
    change() {
      let oDate1 = new Date( this.searchForm.applyDateMin )
      let oDate2 = new Date( this.searchForm.applyDateMax )
      if(oDate1 && oDate2){
        if ( oDate1.getTime() > oDate2.getTime() ) {
          this.$message({
            message: '开始时间不能大于结束时间',
            type: 'warning'
          })
          this.searchForm.applyDateMax = ''
        }
      }
    },
    getDate(e){
      this.$emit('validDate',e)
    }
  }
}

设置时间选择限制

disabledDate: (time) => {
 let beginDateVal = this.addJobForm.beginDate;
 if (beginDateVal) {
   return time.getTime() < beginDateVal;
 }
}

readonly	完全只读	boolean	—	false
disabled	禁用	boolean	—	false
editable	文本框可输入	boolean	—	true
clearable	是否显示清除按钮	boolean	—	true
type	显示类型	string	year/month/date/dates/ week/datetime/datetimerange/daterange	date
format	显示在输入框中的格式	string	见日期格式	yyyy-MM-dd
picker-options	当前时间日期选择器特有的选项参考下表	object	—	{}
value-format	可选，绑定值的格式。不指定则绑定值为 Date 对象	string	见日期格式	—

disabledDate

设置禁用状态，参数为当前日期，要求返回 Boolean

Function

—

change 用户确认选定的值时触发组件绑定值。格式与绑定值一致，可受 value-format 控制

element 常用组件 ----- 日期组件

猜你喜欢