快捷導(dǎo)航

Vue2中Element?DatePicker組件設(shè)置默認(rèn)日期及控制日期范圍

更新時(shí)間：2022年11月23日 09:29:21 作者：白瑕

后臺(tái)項(xiàng)目想使用時(shí)間選擇器選擇一段時(shí)間進(jìn)行數(shù)據(jù)篩選,所以下面這篇文章主要給大家介紹了關(guān)于Vue2中Element?DatePicker組件設(shè)置默認(rèn)日期及控制日期范圍的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

前言

以前都是做練習(xí), 上周拿到這個(gè)任務(wù)直接被卡住…

一、設(shè)置默認(rèn)日期

1.不要用placeholder

依然不使用placeholder屬性, 在v-model初始就綁定了時(shí)間的情況下, 組件可以識(shí)別并自動(dòng)切換到對(duì)應(yīng)日期, 使用placeholder其實(shí)是無(wú)效的.

placeholder展示的值并不是綁定在data中的屬性上的, 即便設(shè)置, 初始狀況下也無(wú)法獲取值.

<el-date-picker
  v-model="date"
  format="yyyy-MM-dd"
>
<!-- :placeholder="date" -->
</el-date-picker>

data() {
  return {
    date: '2017-01-01'
  };
},

這樣也是照常顯示日期, 另外提醒就是format不要全大寫, 會(huì)沒(méi)法切換日期.

另外:

format: datePicker以何種格式展示時(shí)間
value-foramt: detePicker的值為何種格式(從data中直接取到的值為何種格式)

<template>
  <div>
    <el-date-picker v-model="date" format="yyyy-MM-dd" value-format="yyyyMMdd">
    </el-date-picker>
    {{ date }}
  </div>
</template>

data() {
  return {
    date: "20020807",
  };
},

合理使用免除一些不必要的數(shù)據(jù)處理.

2.設(shè)置動(dòng)態(tài)的默認(rèn)日期

還是利用v-model, 可以利用時(shí)間對(duì)象new Date()的輔助.

<el-date-picker
  v-model="date.createDate"
  format="yyyy-MM-dd"
></el-date-picker>

data() {
  return {
    date: {
      createDate: new Date(),
    },
  };
},

不過(guò)你可能并不想每次拿數(shù)據(jù)都到date.createDate里去拿, 所以數(shù)組也是可以的

data() {
  return {
    date: [ new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + '-' + new Date().getDate() ]
  };
},

如果數(shù)組取值形式也不能滿意, 那就把表達(dá)式抽離出來(lái), 然后你可以在mounted或者created周期把它賦值給data里綁定的那個(gè)屬性, 就像這樣:

data() {
  return {
    date: "",
  };
},
created() {
  this.initDate();
},
methods: {
  getDate() {
    return (
      new Date().getFullYear() +
      "-" +
      (new Date().getMonth() + 1) +
      "-" +
      new Date().getDate()
    );
  },
  initDate() {
    this.date = this.getDate()
  },
 },
};

二、限制日期選取

dateRange模式下也是一樣的.

1.方案

不是用disabled屬性來(lái)做這個(gè), 剛開(kāi)始用的時(shí)候迷糊了…

使用pickerOptions屬性來(lái)達(dá)到這個(gè)目的, pickerOptions綁定的函數(shù)對(duì)象里有diabledDate函數(shù)類型, 這個(gè)函數(shù)可以接受一個(gè)參數(shù)在運(yùn)算中作為當(dāng)前日期(這個(gè)參數(shù)一般會(huì)寫作time), 而函數(shù)內(nèi)的表達(dá)式返回true時(shí), datePicker會(huì)根據(jù)表達(dá)式來(lái)對(duì)日期進(jìn)行限制選擇(就是有些日期會(huì)變成灰色不可選).

屬性	說(shuō)明
shortcuts	設(shè)置快捷選項(xiàng)(就是日期選擇表左邊的快捷選項(xiàng))，需要傳入 { text, onClick } 對(duì)象
disabledDate	設(shè)置禁用狀態(tài)，參數(shù)為當(dāng)前日期，要求返回 Boolean
firstDayOfWeek	周起始日
onPick	選中日期后會(huì)執(zhí)行的回調(diào)，只有當(dāng) daterange 或 datetimerange 才生效

但是這個(gè)屬性本身只需要一個(gè)對(duì)象, 不管你做什么, 你最后給它一個(gè)對(duì)象就好了, 你可以先在data里準(zhǔn)備好這個(gè)對(duì)象, 然后在里面搞一個(gè)disabledDate屬性, 但是的disabledDate屬性的值一定得是個(gè)函數(shù), 還得能返回Boolean.

2.舉例

比如這樣:

<el-date-picker
  v-model="date"
  format="yyyy-MM-dd"
  :picker-options="limitDate"
></el-date-picker>

data() {
  return {
    date: "",
    
    limitDate: { 
    // 一個(gè)與picker-options綁定的對(duì)象, 和它內(nèi)部的函數(shù)類型disabledDate屬性
      disabledDate: this.doLimitDate
    },
    
  };
},
methods: {

  doLimitDate() { // 一個(gè)能返回Boolean的函數(shù)
    this.limitDate.disabledDate = (time) => { // time為當(dāng)前日期, disabledDate自帶參數(shù)
      return (time.getTime() + 24 * 3600 * 1000) > Date.now()
    };
  },

},

或者這樣:

嗯…我覺(jué)得可以嘗試直接返回一個(gè)內(nèi)含可返回布爾值的函數(shù)的對(duì)象?

<el-date-picker
  v-model="date"
  format="yyyy-MM-dd"
  :picker-options="limitDate"
></el-date-picker>

data() {
  return {
    date: "",
  };
},
computed: {

  limitDate() { 
    return {
      disabledDate:(time) => { // time為當(dāng)前日期, disabledDate自帶參數(shù)
        return (time.getTime() + 24 * 3600 * 1000) > Date.now();
    };
  }
}

效果都是一樣的, 在我的黑暗模式下不太明顯, 調(diào)回來(lái)會(huì)清晰一些:

你可以看到未達(dá)到的日期都是灰色, 不可選的.

總結(jié)

還好吧, 我前幾天一直很焦慮, 分給我的任務(wù)做的很慢, 很多組件的用法都是第一次嘗試, 然后項(xiàng)目也不熟悉, 公共組件和方法用起來(lái)也是磕磕絆絆然后接口又出了問(wèn)題, 啊——! 總之結(jié)果就是我做的很慢…

到此這篇關(guān)于Vue2中Element DatePicker組件設(shè)置默認(rèn)日期及控制日期范圍的文章就介紹到這了,更多相關(guān)Vue2 Element DatePicker組件設(shè)置日期內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: