Skip to content

Commit

Permalink
docs: add i18n doc
Browse files Browse the repository at this point in the history
  • Loading branch information
mengxiong10 committed Nov 10, 2019
1 parent 657c23e commit fc1a8c1
Show file tree
Hide file tree
Showing 3 changed files with 114 additions and 0 deletions.
37 changes: 37 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 |
Expand Down
35 changes: 35 additions & 0 deletions README.zh-CN.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

| 属性 | 描述 | 类型 | 默认值 |
Expand Down
42 changes: 42 additions & 0 deletions locale.md
Original file line number Diff line number Diff line change
@@ -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,
}
```

0 comments on commit fc1a8c1

Please sign in to comment.