element日歷組件只顯示月和日如何把年份隱藏掉

更新時間：2023年12月18日 09:41:13 作者：樹洞菇?jīng)?

這篇文章主要介紹了element日歷組件只顯示月和日如何把年份隱藏掉的操作方法,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧

element日歷組件只顯示月和日，把年份隱藏掉

最終效果：

把年份和旁邊的兩個小標(biāo)志小標(biāo)去掉，也就是把這紅色框框內(nèi)的內(nèi)容隱藏掉

我們先用控制臺看看里面具體的樣式

1、可以看到 class =“el-date-picker__header” 的 div是控制日歷組件的標(biāo)題的，div里面的button和span就是對應(yīng)標(biāo)題里面的各個標(biāo)簽
2、需要把想要隱藏的標(biāo)簽給隱藏掉，就是要取“el-date-picker__header”這個類下指定button和span
3、確定需要我們隱藏的到底是哪個button和span（年份和對應(yīng)的<< 和 >>隱藏掉）

/*選擇日期，年份的隱藏 */
.picker-date {
  .el-date-picker__header {
    span:nth-child(3) { /*第三個標(biāo)簽是span的標(biāo)簽，把它隱藏*/
      display: none;
    }
    button:nth-child(1) {
      display: none;
    }
    button:nth-child(5) {
      display: none;
    }
  }
}

補充：

el-date-picker 默認(rèn)展示當(dāng)前日期

1、第一步：html中展示 el-date-picker綁定的值為 v-model=“form.checkInTime”

           <el-date-picker
              clearable
              size="small"
              v-model="form.checkInTime"
              type="date"
              value-format="yyyy-MM-dd"
              :placeholder="$t('punchCard.please_select_punchCardDate')"
              :picker-options="pickerOptions"
            >
            </el-date-picker>

2、第二步：封裝一個函數(shù)getDate()

getDate() {
      var now = new Date();
      var year = now.getFullYear(); //得到年份
      var month = now.getMonth(); //得到月份
      var date = now.getDate(); //得到日期
      var hour = " 00:00:00"; //默認(rèn)時分秒 如果傳給后臺的格式為年月日時分秒，就需要加這個，如若不需要，此行可忽略
      month = month + 1;
      month = month.toString().padStart(2, "0");
      date = date.toString().padStart(2, "0");
      var defaultDate = `${year}-${month}-${date}`;//
      return defaultDate;
    },

3、第三步：在界面剛開始的時候直接把html中綁定的值this.form.checkInTime直接付給這個函數(shù)
我這邊是打開一個dialog，所以在打開的時候賦值 this.form.checkInTime = this.getDate();

/** 新增按鈕操作 */
    handleAdd() {
      this.reset();
      this.activePanel = "first";
      this.form.checkInTime = this.getDate();
      this.open = true;
      this.title = this.$t("punchCard.startPunchCard");
    },

到此這篇關(guān)于element日歷組件只顯示月和日，把年份隱藏掉的文章就介紹到這了,更多相關(guān)element日歷組件顯示月和日內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: