ant design vue datepicker日期選擇器中文化操作
按照ant design vue官方說明,使用日期選擇器需要在入口檔案(main.js)全域性設定語言:
// 預設語言為 en-US,如果你需要設定其他語言,推薦在入口檔案全域性設定 locale import moment from 'moment'; import 'moment/locale/zh-cn'; moment.locale('zh-cn'); <a-date-picker :defaultValue="moment('2015-01-01','YYYY-MM-DD')" />
完成此步驟後,日期只有部分是中文的,並且年月順序錯誤,查找了很多資料才發現,ant design vue有一個國際化設定,需要在入口檔案(App.vue)中引入元件 LocaleProvider 用於全域性配置國際化方案
<template> <a-locale-provider :locale="locale"> <App /> </a-locale-provider> </template> <script> import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN'; export default { data() { return { locale: zhCN,} } } </script>
因此,可以直接合並寫入App.vue
<template> <a-locale-provider :locale="locale"> <App /> </a-locale-provider> </template> <script> import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN'; import moment from 'moment'; import 'moment/locale/zh-cn'; moment.locale('zh-cn'); export default { data() { return { locale: zhCN,} } } </script>
日期選擇器不管在哪個模組直接使用就是中文啦。
有個小坑~
完成到這裡,可能eslint會報錯,提示
Identifier is not a camel case (camelcase)
在eslint的配置檔案中新增rules:
"camelcase": [0,{"properties": "never"}]
即可!
有描述不清楚或不懂的地方歡迎留言討論噢~
補充知識:ant-design-vue中的DatePicker 日期選擇框遇到的坑
問題描述:
在使用ant-design-vue中的元件 DatePicker 日期選擇框和下拉選擇框的時候,由於下拉選擇框中的資料是由後臺請求過來的,然後在本地手動加了兩條資料;(暫且稱後臺請求過來的資料為A類資料,手動新增的資料為B類資料;),下拉選選擇A類資料後,選擇日期選擇框,再將下拉選中的資料選成B類資料,則日期選擇框中的資料不顯示了;要是下拉選中選擇B類資料,選擇日期之後,下拉選再選擇A類資料,日期選擇框中的資料同樣也不顯示了;
解決方法:
出現這個問題之前 日期選擇框沒有使用v-model ,使用v-model繫結一個moment() 物件後,就不會消失了;要繫結moment()物件則需要安裝moment外掛,
安裝方式:
npm install moment --save # npm方式
yarn add moment # Yarn方式
在需要的檔案中引入一下import moment from "moment",就可以使用moment() 物件了;
例子:
<a-select style="width: 80%;" v-model="publicChannel" @change="changeChannel" > <a-select-option :value="value.mediaPlatformCode" v-for="(value,key,index) in mediaPlate" :key="index" > {{value.mediaPlatformName}}</a-select-option> </a-select> -----------------<a-date-picker v-model='mom' /> ---------------------- data(){ return{ mom:moment() } }
如果下拉選中的資料都是統一的,沒有在本地新增可以不用v-model繫結一個物件,直接
<a-date-picker @change="onChange" />,當然在onChange事件中得到的還是一個moment物件,需要對得到的資料進行轉換才能得到想要的時間格式
以上這篇ant design vue datepicker日期選擇器中文化操作就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支援我們。