mirror of
https://github.com/tenrok/vue2-datepicker.git
synced 2026-05-17 03:59:39 +03:00
docs: add i18n doc
This commit is contained in:
@@ -57,6 +57,43 @@ $ npm install vue2-datepicker --save
|
||||
</template>
|
||||
```
|
||||
|
||||
## Internationalization
|
||||
|
||||
The default language of v3.x is English. If you need other locales.
|
||||
You can import locale file.
|
||||
Once you import a locale, it becomes the active locale.
|
||||
|
||||
```js
|
||||
import DatePicker from 'vue2-datepicker';
|
||||
import 'vue2-datepicker/index.css';
|
||||
|
||||
import 'vue2-datepicker/locale/zh-cn';
|
||||
```
|
||||
|
||||
You can override the default locale by `lang`.
|
||||
[Full config](https://github.com/mengxiong10/vue2-datepicker/blob/master/locale.md)
|
||||
|
||||
```html
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
lang: {
|
||||
formatLocale: {
|
||||
firstDayOfWeek: 1,
|
||||
},
|
||||
monthBeforeYear: false,
|
||||
},
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<date-picker :lang="lang"></date-picker>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Props
|
||||
|
||||
| Prop | Description | Type | Default |
|
||||
|
||||
@@ -57,6 +57,41 @@ $ npm install vue2-datepicker --save
|
||||
</template>
|
||||
```
|
||||
|
||||
## 国际化
|
||||
|
||||
v3.x 默认语言是英文. 可以引入语言包切换到中文.
|
||||
|
||||
```js
|
||||
import DatePicker from 'vue2-datepicker';
|
||||
import 'vue2-datepicker/index.css';
|
||||
|
||||
import 'vue2-datepicker/locale/zh-cn';
|
||||
```
|
||||
|
||||
还可以通过`lang`去覆盖默认语言选项.
|
||||
[完整配置](https://github.com/mengxiong10/vue2-datepicker/blob/master/locale.md)
|
||||
|
||||
```html
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
lang: {
|
||||
formatLocale: {
|
||||
firstDayOfWeek: 1,
|
||||
},
|
||||
monthBeforeYear: false,
|
||||
},
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<date-picker :lang="lang"></date-picker>
|
||||
</template>
|
||||
```
|
||||
|
||||
### Props
|
||||
|
||||
| 属性 | 描述 | 类型 | 默认值 |
|
||||
|
||||
@@ -0,0 +1,42 @@
|
||||
```js
|
||||
{
|
||||
// the locale of formatting and parsing function
|
||||
formatLocale: {
|
||||
// MMMM
|
||||
months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
|
||||
// MMM
|
||||
monthsShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
|
||||
// dddd
|
||||
weekdays: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
|
||||
// ddd
|
||||
weekdaysShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
|
||||
// dd
|
||||
weekdaysMin: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
|
||||
// first day of week
|
||||
firstDayOfWeek: 0,
|
||||
// first week contains January 1st.
|
||||
firstWeekContainsDate: 1,
|
||||
// format 'a', 'A'
|
||||
meridiem: (h: number, _: number, isLowercase: boolean) {
|
||||
const word = h < 12 ? 'AM' : 'PM';
|
||||
return isLowercase ? word.toLocaleLowerCase() : word;
|
||||
},
|
||||
// parse ampm
|
||||
meridiemParse: /[ap]\.?m?\.?/i;
|
||||
// parse ampm
|
||||
isPM: (input: string) {
|
||||
return `${input}`.toLowerCase().charAt(0) === 'p';
|
||||
}
|
||||
},
|
||||
// the calendar header, default formatLocale.weekdaysMin
|
||||
days: [],
|
||||
// the calendar months, default formatLocale.monthsShort
|
||||
months: [],
|
||||
// the calendar title of year
|
||||
yearFormat: 'YYYY 年',
|
||||
// the calendar title of month
|
||||
monthFormat: 'MMM',
|
||||
// the calendar title of month before year
|
||||
monthBeforeYear: false,
|
||||
}
|
||||
```
|
||||
Reference in New Issue
Block a user