快捷導(dǎo)航

Vue3 elementUI 中 date-picker 使用過程遇到坑

更新時間：2023年10月26日 14:29:54 作者：364.99°

這篇文章主要介紹了Vue3 elementUI 中 date-picker 使用過程遇到坑,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧

1. 英文顯示

          <el-date-picker
            v-model="dateValue"
            type="date"
            placeholder="選擇日期"
		  >
          </el-date-picker>

解決方案：

引用 zhCn

<script>
import zhCn from "element-plus/dist/locale/zh-cn";
export default {
  data() {
    return {
      locale: zhCn,
      dateValue: '',
    }
  }
}
</script>

config-provider 作為父標(biāo)簽

        <el-config-provider :locale="locale">
          <el-date-picker
            v-model="dateValue"
            type="date"
            placeholder="選擇日期"
          >
          </el-date-picker>
        </el-config-provider>

效果

2. format 與 value-format 無效

默認(rèn)情況：

        <el-config-provider :locale="locale">
          <el-date-picker
            v-model="dateValue"
            type="date"
            placeholder="選擇日期"
          >
          </el-date-picker>
        </el-config-provider>

效果：

輸入框

dateValue

格式化之后：

        <el-config-provider :locale="locale">
          <el-date-picker
            v-model="dateValue"
            type="date"
            placeholder="選擇日期"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-config-provider>

效果：

輸入框

dateValue

肉眼可見，月份的格式化是對的即 MM，那我們就把其他兩個也改成大寫

        <el-config-provider :locale="locale">
          <el-date-picker
            v-model="dateValue"
            type="date"
            placeholder="選擇日期"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD">
          </el-date-picker>
        </el-config-provider>

效果：

dateValue

3. date-picker 時間范圍

        <el-config-provider :locale="locale">
          <el-date-picker
            v-model="dateValues"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="開始日期"
            end-placeholder="結(jié)束日期"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            >
          </el-date-picker>
        </el-config-provider>

如果是時間范圍，v-model 要綁定一個數(shù)組類型變量。

	export default {
	  data() {
	    return {
	      locale: zhCn,
	      dateValues: [],
	    }
	  }
	}

效果：

dateValues：

4. 小結(jié)

英文顯示改成中文顯示需要，引入 zhCn ，然后加個父標(biāo)簽 config-provider localelocale 配置語言代碼
在 element-plus 中的 date-picker，format 與 value-format 中的格式化字符都要用 大寫
date-picker 單獨選擇一個時間，v-model 綁定一個 字符串（string），date-picker 選擇一個時間范圍，v-model 綁定一個 數(shù)組（[]）

到此這篇關(guān)于Vue3 elementUI 中 date-picker 使用的坑的文章就介紹到這了,更多相關(guān)vue3 elementUI date-picker 使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: