日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后,達者為師

網站首頁 編程語言 正文

DatePicker動態設置picker-options 中的disabledDate屬性操作;

作者:i_am_a_div_日積月累_ 更新時間: 2022-07-03 編程語言

一、場景:
有兩個時間選擇器A和B。A的時間任意選,B的時間必須選擇A之后的時間。此時就需要給B設置可選時間區間,而且是動態的值,既動態設置picker-options 中的disabledDate
在這里插入圖片描述
在這里插入圖片描述

二、代碼片段

html:

          <el-col :span="8">
            <el-form-item label="A時間" prop="Atime">
              <el-date-picker value-format="yyyy-MM-dd" v-model="Atime" type="date" placeholder="選擇日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="延期至:" prop="Btime">
              <el-date-picker value-format="yyyy-MM-dd" v-model="Btime" type="date" placeholder="選擇日期" :picker-options="setDateRange">
              </el-date-picker>
            </el-form-item>
          </el-col>

data:

data() {
   	return {
            	Atime:'',
                Btime:'',
                setDateRange: {
                    disabledDate: this.disabledDate // 這是一個方法
                }
            }
        },

methods:

methods:{
    disabledDate (time) {
      // 當時間小于A時間  就是不可選
      return time.getTime() < new Date(this.Atime).getTime()

	  // 上方的new Date(this.Atime).getTime()  是將日期格式'2022-02-10' 轉成時間戳 1589068800000
    },

}

三、 拓展:如何用js將日期轉換成時間戳

new Date('2022-06-01').getTime()

四、時間戳轉日期方法1

function getTime(dateStr){
  var date = new Date(dateStr);
  var Month = date.getMonth() + 1;
  var Day = date.getDate();
  var Y = date.getFullYear() + '-';
  var M = Month < 10 ? '0' + Month + '-' : Month + '-';
  var D = Day + 1 < 10 ? '0' + Day : Day;
  return Y + M + D;
}

getTime(1654074822778)   //就會得到 '2022-06-01' 注意參數傳的是數字不是字符串

有效的請點贊收藏支持一波!

原文鏈接:https://blog.csdn.net/i_am_a_div/article/details/125069288

欄目分類
最近更新