Culture operation in ant design vue datepicker date selector

According to the official instructions of ant design vue, to use the date selector, you need to set the language globally in the entry file (main. js):

//  The default language is  en-US If you need to set other languages, it is recommended to set them globally in the entry file  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')" />

After completing this step, only part of the date is in Chinese, and the order of year and month is wrong. After searching a lot of data, it is found that ant design vue has one internationalization setting, and it is necessary to introduce the component LocaleProvider in the entry file (App. vue) for global configuration of internationalization scheme

<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>

Therefore, you can directly merge and write 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>

No matter which module the date selector is used directly, it is Chinese.

There is a small pit ~

When finished here, eslint may report an error and prompt

Identifier is not a camel case (camelcase)

Add rules to the configuration file of eslint:

"camelcase": [0, {"properties": "never"}]

That's enough!

There are unclear or unclear descriptions. Welcome to leave a message for discussion ~

Additional knowledge: Pits encountered in the DatePicker date selection box in ant-design-vue

Problem description:

When using the DatePicker date selection box and drop-down selection box in ant-design-vue, the data in the drop-down selection box is requested by the background, and then two pieces of data are manually added locally; (For the time being, the data requested from the background is A class data, and the data added manually is B class data;) After selecting A data from the drop-down, select the date selection box, and then select the selected data from the drop-down as B data, then the data in the date selection box will not be displayed; If B data is selected in the drop-down, after selecting the date, A data is selected again in the drop-down, and the data in the date selection box will not be displayed either;

Solution:

The date selection box did not use v-model before this problem occurred, and after binding an moment () object with v-model, it will not disappear; To bind the moment () object, you need to install the moment plug-in.

Installation method:

npm install moment-save # npm Mode

yarn add moment # Yarn Mode

Introduce 1 import moment from "moment" in the required file, and you can use moment () object;

Examples:

 <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()
 }
}

If all the data selected in the drop-down are of Unified 1, you can bind an object without v-model if you do not add it locally

< a-date-picker @change="onChange" / > Of course, in the onChange event, you still get an moment object, and you need to transform the data to get the desired time format