mirror of
https://github.com/tenrok/vue2-datepicker.git
synced 2026-06-24 05:40:35 +03:00
docs: add i18n doc
This commit is contained in:
@@ -57,6 +57,43 @@ $ npm install vue2-datepicker --save
|
|||||||
</template>
|
</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
|
### Props
|
||||||
|
|
||||||
| Prop | Description | Type | Default |
|
| Prop | Description | Type | Default |
|
||||||
|
|||||||
@@ -57,6 +57,41 @@ $ npm install vue2-datepicker --save
|
|||||||
</template>
|
</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
|
### 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