add calendar doc

pull/9/head
tjz 2018-03-14 22:00:43 +08:00
parent 4b67c794d1
commit ca11705ef0
50 changed files with 1083 additions and 236 deletions

View File

@ -1,26 +1,24 @@
---
order: 0
title:
zh-CN: 基本
en-US: Basic
---
## zh-CN
<cn>
#### 基本
一个通用的日历面板,支持年/月切换。
</cn>
## en-US
<us>
#### basic
A basic calendar component with Year/Month switch.
</us>
````jsx
import { Calendar } from 'antd';
function onPanelChange(value, mode) {
console.log(value, mode);
```html
<template>
<a-calendar @panelChange="onPanelChange" />
</template>
<script>
export default {
methods: {
onPanelChange(value, mode) {
console.log(value, mode);
}
}
}
ReactDOM.render(
<Calendar onPanelChange={onPanelChange} />
, mountNode);
````
</script>
```

View File

@ -1,28 +1,27 @@
---
order: 2
title:
zh-CN: 卡片模式
en-US: Card
---
## zh-CN
<cn>
#### 卡片模式
用于嵌套在空间有限的容器中。
</cn>
## en-US
<us>
#### Card
Nested inside a container element for rendering in limited space.
</us>
````jsx
import { Calendar } from 'antd';
function onPanelChange(value, mode) {
console.log(value, mode);
}
ReactDOM.render(
<div style={{ width: 300, border: '1px solid #d9d9d9', borderRadius: 4 }}>
<Calendar fullscreen={false} onPanelChange={onPanelChange} />
```html
<template>
<div :style="{ width: '300px', border: '1px solid #d9d9d9', borderRadius: '4px' }">
<a-calendar :fullscreen="false" @panelChange="onPanelChange" />
</div>
, mountNode);
````
</template>
<script>
export default {
methods: {
onPanelChange(value, mode) {
console.log(value, mode);
}
}
}
</script>
```

View File

@ -0,0 +1,48 @@
<script>
import Basic from './basic'
import Card from './card'
import NoticeCalendar from './notice-calendar'
import Select from './select'
import CN from '../index.zh-CN.md'
import US from '../index.en-US.md'
const md = {
cn: `# Calendar 日历
按照日历形式展示数据的容器
## 何时使用
当数据是日期或按照日期划分时例如日程课表价格日历等农历等目前支持年/月切换
## 代码演示`,
us: `# Calendar
Container for displaying data in calendar form.
## When To Use
When data is in the form of dates, such as schedules, timetables, prices calendar, lunar calendar. This component also supports Year/Month switch.`,
}
export default {
category: 'Components',
type: 'Data Display',
subtitle: '日历',
cols: 1,
title: 'Calendar',
render () {
return (
<div>
<md cn={md.cn} us={md.us}/>
<Basic />
<Card />
<NoticeCalendar />
<Select />
<api>
<CN slot='cn' />
<US/>
</api>
</div>
)
},
}
</script>

View File

@ -1,86 +1,69 @@
---
order: 1
title:
zh-CN: 通知事项日历
en-US: Notice Calendar
---
## zh-CN
<cn>
#### 通知事项日历
一个复杂的应用示例,用 `dateCellRender``monthCellRender` 函数来自定义需要渲染的数据。
</cn>
## en-US
<us>
#### Notice Calendar
This component can be rendered by using `dateCellRender` and `monthCellRender` with the data you need.
</us>
````jsx
import { Calendar, Badge } from 'antd';
function getListData(value) {
let listData;
switch (value.date()) {
case 8:
listData = [
{ type: 'warning', content: 'This is warning event.' },
{ type: 'success', content: 'This is usual event.' },
]; break;
case 10:
listData = [
{ type: 'warning', content: 'This is warning event.' },
{ type: 'success', content: 'This is usual event.' },
{ type: 'error', content: 'This is error event.' },
]; break;
case 15:
listData = [
{ type: 'warning', content: 'This is warning event' },
{ type: 'success', content: 'This is very long usual event。。....' },
{ type: 'error', content: 'This is error event 1.' },
{ type: 'error', content: 'This is error event 2.' },
{ type: 'error', content: 'This is error event 3.' },
{ type: 'error', content: 'This is error event 4.' },
]; break;
default:
}
return listData || [];
}
function dateCellRender(value) {
const listData = getListData(value);
return (
<ul className="events">
{
listData.map(item => (
<li key={item.content}>
<Badge status={item.type} text={item.content} />
</li>
))
}
```html
<template>
<a-calendar>
<ul class="events" slot="dateCellRender" slot-scope="value">
<li v-for="item in getListData(value)" :key="item.content">
<a-badge :status="item.type" :text="item.content" />
</li>
</ul>
);
}
<template slot="monthCellRender" slot-scope="value">
<div v-if="getMonthData(value)" class="notes-month">
<section>{{getMonthData(value)}}</section>
<span>Backlog number</span>
</div>
</template>
</a-calendar>
</template>
<script>
export default {
methods: {
getListData(value) {
let listData;
switch (value.date()) {
case 8:
listData = [
{ type: 'warning', content: 'This is warning event.' },
{ type: 'success', content: 'This is usual event.' },
]; break;
case 10:
listData = [
{ type: 'warning', content: 'This is warning event.' },
{ type: 'success', content: 'This is usual event.' },
{ type: 'error', content: 'This is error event.' },
]; break;
case 15:
listData = [
{ type: 'warning', content: 'This is warning event' },
{ type: 'success', content: 'This is very long usual event。。....' },
{ type: 'error', content: 'This is error event 1.' },
{ type: 'error', content: 'This is error event 2.' },
{ type: 'error', content: 'This is error event 3.' },
{ type: 'error', content: 'This is error event 4.' },
]; break;
default:
}
return listData || [];
},
function getMonthData(value) {
if (value.month() === 8) {
return 1394;
getMonthData(value) {
if (value.month() === 8) {
return 1394;
}
},
}
}
function monthCellRender(value) {
const num = getMonthData(value);
return num ? (
<div className="notes-month">
<section>{num}</section>
<span>Backlog number</span>
</div>
) : null;
}
ReactDOM.render(
<Calendar dateCellRender={dateCellRender} monthCellRender={monthCellRender} />
, mountNode);
````
````css
</script>
<style scoped>
.events {
list-style: none;
margin: 0;
@ -100,4 +83,5 @@ ReactDOM.render(
.notes-month section {
font-size: 28px;
}
````
</style>
```

View File

@ -1,46 +1,44 @@
---
order: 3
title:
zh-CN: 选择功能
en-US: Selectable Calendar
---
## zh-CN
<cn>
#### 选择功能
一个通用的日历面板,支持年/月切换。
</cn>
## en-US
<us>
#### Selectable Calendar
A basic calendar component with Year/Month switch.
</us>
````jsx
import { Calendar, Alert } from 'antd';
```html
<template>
<div>
<a-alert :message="`You selected date: ${selectedValue && selectedValue.format('YYYY-MM-DD')}`" />
<div :style="{ display: 'inline-block', width: '500px', border: '1px solid #d9d9d9', borderRadius: '4px' }">
<a-calendar :value="value" @select="onSelect" @panelChange="onPanelChange" />
</div>
<div :style="{ display: 'inline-block', width: '500px',marginLeft: '20px', border: '1px solid #d9d9d9', borderRadius: '4px' }">
<a-calendar v-model="value" />
</div>
</div>
</template>
<script>
import moment from 'moment';
class App extends React.Component {
state = {
value: moment('2017-01-25'),
selectedValue: moment('2017-01-25'),
}
onSelect = (value) => {
this.setState({
value,
selectedValue: value,
});
}
onPanelChange = (value) => {
this.setState({ value });
}
render() {
const { value, selectedValue } = this.state;
return (
<div>
<Alert message={`You selected date: ${selectedValue && selectedValue.format('YYYY-MM-DD')}`} />
<Calendar value={value} onSelect={this.onSelect} onPanelChange={this.onPanelChange} />
</div>
);
export default {
data() {
return {
value: moment('2017-01-25'),
selectedValue: moment('2017-01-25'),
}
},
methods: {
onSelect(value) {
this.value = value
this.selectedValue = value
},
onPanelChange (value) {
this.value = value
}
}
}
</script>
```
ReactDOM.render(<App />, mountNode);
````

View File

@ -1,45 +1,41 @@
---
category: Components
type: Data Display
cols: 1
title: Calendar
---
Container for displaying data in calendar form.
## When To Use
When data is in the form of dates, such as schedules, timetables, prices calendar, lunar calendar. This component also supports Year/Month switch.
## API
**Note:** Part of the Calendar's locale is read from `value`. So, please set the locale of `moment` correctly.
```jsx
````html
// The default locale is en-US, if you want to use other locale, just set locale in entry file globaly.
// import moment from 'moment';
// import 'moment/locale/zh-cn';
// moment.locale('zh-cn');
<Calendar
dateCellRender={dateCellRender}
monthCellRender={monthCellRender}
onPanelChange={onPanelChange}
onSelect={onSelect}
/>
```
<a-calendar
@panelChange="onPanelChange"
@select="onSelect"
>
<template slot="dateCellRender" slot-scope="value"></template>
<template slot="monthCellRender" slot-scope="value"></template
</a-calendar>
````
customize the progress dot by setting a scoped slot
| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
| dateCellRender | Customize the display of the date cell, the returned content will be appended to the cell | function(date: moment): ReactNode | - |
| dateFullCellRender | Customize the display of the date cell, the returned content will override the cell | function(date: moment): ReactNode | - |
| dateCellRender | Customize the display of the date cell by setting a scoped slot, the returned content will be appended to the cell | function(date: moment) | - |
| dateFullCellRender | Customize the display of the date cell by setting a scoped slot, the returned content will override the cell | function(date: moment) | - |
| defaultValue | The date selected by default | [moment](http://momentjs.com/) | default date |
| disabledDate | Function that specifies the dates that cannot be selected | (currentDate: moment) => boolean | - |
| fullscreen | Whether to display in full-screen | boolean | `true` |
| locale | The calendar's locale | object | [default](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json) |
| locale | The calendar's locale | object | [default]
(https://github.com/vueComponent/ant-design/blob/master/components/date-picker/locale/example.json) |
| mode | The display mode of the calendar | `month` \| `year` | `month` |
| monthCellRender | Customize the display of the month cell, the returned content will be appended to the cell | function(date: moment): ReactNode | - |
| monthFullCellRender | Customize the display of the month cell, the returned content will override the cell | function(date: moment): ReactNode | - |
| value | The current selected date | [moment](http://momentjs.com/) | current date |
| onPanelChange | Callback for when panel changes | function(date: moment, mode: string) | - |
| onSelect | Callback for when a date is selected | function(date: moment | - |
| monthCellRender | Customize the display of the month cell by setting a scoped slot, the returned content will be appended to the cell | function(date: moment) | - |
| monthFullCellRender | Customize the display of the month cell by setting a scoped slot, the returned content will override the cell | function(date: moment) | - |
| value(v-model) | The current selected date | [moment](http://momentjs.com/) | current date |
### events
| Events Name | Description | Arguments |
| --- | --- | --- |
| panelChange | Callback for when panel changes | function(date: moment, mode: string) | - |
| select | Callback for when a date is selected | function(date: moment | - |
| change | Callback for when value change | function(date: moment | - |

View File

@ -34,10 +34,10 @@ export const CalendarProps = () => ({
defaultValue: MomentType,
mode: CalendarMode,
fullscreen: PropTypes.bool,
dateCellRender: PropTypes.func,
monthCellRender: PropTypes.func,
dateFullCellRender: PropTypes.func,
monthFullCellRender: PropTypes.func,
// dateCellRender: PropTypes.func,
// monthCellRender: PropTypes.func,
// dateFullCellRender: PropTypes.func,
// monthFullCellRender: PropTypes.func,
locale: PropTypes.any,
// onPanelChange?: (date?: moment.Moment, mode?: CalendarMode) => void;
// onSelect?: (date?: moment.Moment) => void;
@ -52,7 +52,10 @@ export default {
prefixCls: PREFIX_CLS,
mode: 'month',
}),
model: {
prop: 'value',
event: 'change',
},
data () {
const value = this.value || this.defaultValue || callMoment(moment)
if (!moment.isMoment(value)) {
@ -78,8 +81,9 @@ export default {
},
},
methods: {
monthCellRender (value) {
const { prefixCls, monthCellRender = noop } = this
monthCellRender2 (value) {
const { prefixCls, $scopedSlots } = this
const monthCellRender = this.monthCellRender || $scopedSlots.monthCellRender || noop
return (
<div class={`${prefixCls}-month`}>
<div class={`${prefixCls}-value`}>
@ -92,8 +96,9 @@ export default {
)
},
dateCellRender (value) {
const { prefixCls, dateCellRender = noop } = this
dateCellRender2 (value) {
const { prefixCls, $scopedSlots } = this
const dateCellRender = this.dateCellRender || $scopedSlots.dateCellRender || noop
return (
<div class={`${prefixCls}-date`}>
<div class={`${prefixCls}-value`}>
@ -112,8 +117,9 @@ export default {
}
if (way === 'select') {
this.$emit('select', value)
this.$emit('change', value)
} else if (way === 'changePanel') {
this.$emit('panelChange', value, this.sMode)
this.onPanelChange(value, this.sMode)
}
},
@ -121,7 +127,7 @@ export default {
const mode = (type === 'date') ? 'month' : 'year'
if (this.sMode !== mode) {
this.setState({ sMode: mode })
this.$emit('panelChange', this.sValue, this.sMode)
this.onPanelChange(this.sValue, mode)
}
},
@ -135,6 +141,9 @@ export default {
onPanelChange (value, mode) {
this.$emit('panelChange', value, mode)
if (value !== this.sValue) {
this.$emit('change', value)
}
},
onSelect (value) {
@ -143,7 +152,7 @@ export default {
renderCalendar (locale, localeCode) {
const props = getOptionProps(this)
const { sValue: value, sMode: mode, $listeners } = this
const { sValue: value, sMode: mode, $listeners, $scopedSlots } = this
if (value && localeCode) {
value.locale(localeCode)
}
@ -155,12 +164,12 @@ export default {
cls += (` ${prefixCls}-fullscreen`)
}
const monthCellRender = monthFullCellRender || this.monthCellRender
const dateCellRender = dateFullCellRender || this.dateCellRender
const monthCellRender = monthFullCellRender || $scopedSlots.monthFullCellRender || this.monthCellRender2
const dateCellRender = dateFullCellRender || $scopedSlots.dateFullCellRender || this.dateCellRender2
const fullCalendarProps = {
props: {
...props,
Select: noop,
Select: {},
locale: locale.lang,
type: type,
prefixCls: prefixCls,

View File

@ -1,46 +1,39 @@
---
category: Components
type: Data Display
subtitle: 日历
cols: 1
title: Calendar
---
按照日历形式展示数据的容器。
## 何时使用
当数据是日期或按照日期划分时,例如日程、课表、价格日历等,农历等。目前支持年/月切换。
## API
**注意:**Calendar 部分 locale 是从 value 中读取,所以请先正确设置 moment 的 locale。
```jsx
````html
// 默认语言为 en-US所以如果需要使用其他语言推荐在入口文件全局设置 locale
// import moment from 'moment';
// import 'moment/locale/zh-cn';
// moment.locale('zh-cn');
<Calendar
dateCellRender={dateCellRender}
monthCellRender={monthCellRender}
onPanelChange={onPanelChange}
onSelect={onSelect}
/>
```
<a-calendar
@panelChange="onPanelChange"
@select="onSelect"
>
<template slot="dateCellRender" slot-scope="value"></template>
<template slot="monthCellRender" slot-scope="value"></template
</a-calendar>
````
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| dateCellRender | 自定义渲染日期单元格,返回内容会被追加到单元格 | function(date: moment): ReactNode | 无 |
| dateFullCellRender | 自定义渲染日期单元格,返回内容覆盖单元格 | function(date: moment): ReactNode | 无 |
| dateCellRender | 作用域插槽,用来自定义渲染日期单元格,返回内容会被追加到单元格, | function(date: moment) | 无 |
| dateFullCellRender | 作用域插槽,自定义渲染日期单元格,返回内容覆盖单元格 | function(date: moment) | 无 |
| defaultValue | 默认展示的日期 | [moment](http://momentjs.com/) | 默认日期 |
| disabledDate | 不可选择的日期 | (currentDate: moment) => boolean | 无 |
| fullscreen | 是否全屏显示 | boolean | true |
| locale | 国际化配置 | object | [默认配置](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json) |
| locale | 国际化配置 | object | [默认配置](https://github.com/vueComponent/ant-design/blob/master/components/date-picker/locale/example.json) |
| mode | 初始模式,`month/year` | string | month |
| monthCellRender | 自定义渲染月单元格,返回内容会被追加到单元格 | function(date: moment): ReactNode | 无 |
| monthFullCellRender | 自定义渲染月单元格,返回内容覆盖单元格 | function(date: moment): ReactNode | 无 |
| value | 展示日期 | [moment](http://momentjs.com/) | 当前日期 |
| onPanelChange | 日期面板变化回调 | function(date: moment, mode: string) | 无 |
| onSelect | 点击选择日期回调 | function(date: moment | 无 |
| monthCellRender | 作用域插槽,自定义渲染月单元格,返回内容会被追加到单元格 | function(date: moment) | 无 |
| monthFullCellRender | 作用域插槽,自定义渲染月单元格,返回内容覆盖单元格 | function(date: moment) | 无 |
| value(v-model) | 展示日期 | [moment](http://momentjs.com/) | 当前日期 |
### 事件
| 事件名称 | 说明 | 回调参数 |
| --- | --- | --- |
| panelChange | 日期面板变化回调 | function(date: moment, mode: string) | 无 |
| select | 点击选择日期回调 | function(date: moment | 无 |
| change | 日期变化时的回调, 面板变化有可能导致日期变化| function(date: moment | 无 |

View File

@ -0,0 +1,19 @@
import CalendarLocale from '../../vc-calendar/src/locale/ar_EG'
import TimePickerLocale from '../../time-picker/locale/ar_EG'
// Merge into a locale object
const locale = {
lang: {
placeholder: 'اختيار التاريخ',
rangePlaceholder: ['البداية', 'النهاية'],
...CalendarLocale,
},
timePickerLocale: {
...TimePickerLocale,
},
}
// All settings at:
// https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json
export default locale

View File

@ -0,0 +1,22 @@
import CalendarLocale from '../../vc-calendar/src/locale/bg_BG'
import TimePickerLocale from '../../time-picker/locale/bg_BG'
// Merge into a locale object
const locale = {
lang: {
placeholder: 'Избор на дата',
rangePlaceholder: [
'Начална', 'Крайна'
],
...CalendarLocale
},
timePickerLocale: {
...TimePickerLocale
}
}
// All settings at:
// https://github.com/ant-design/ant-design/blob/master/components/date-picker/l
// o cale/example.json
export default locale

View File

@ -0,0 +1,22 @@
import CalendarLocale from '../../vc-calendar/src/locale/ca_ES'
import TimePickerLocale from '../../time-picker/locale/ca_ES'
// Merge into a locale object
const locale = {
lang: {
placeholder: 'Seleccionar data',
rangePlaceholder: [
'Data inicial', 'Data final'
],
...CalendarLocale
},
timePickerLocale: {
...TimePickerLocale
}
}
// All settings at:
// https://github.com/ant-design/ant-design/blob/master/components/date-picker/l
// o cale/example.json
export default locale

View File

@ -0,0 +1,22 @@
import CalendarLocale from '../../vc-calendar/src/locale/cs_CZ'
import TimePickerLocale from '../../time-picker/locale/cs_CZ'
// Merge into a locale object
const locale = {
lang: {
placeholder: 'Vybrat datum',
rangePlaceholder: [
'Od', 'Do'
],
...CalendarLocale
},
timePickerLocale: {
...TimePickerLocale
}
}
// All settings at:
// https://github.com/ant-design/ant-design/blob/master/components/date-picker/l
// o cale/example.json
export default locale

View File

@ -0,0 +1,20 @@
import CalendarLocale from '../../vc-calendar/src/locale/de_DE'
import TimePickerLocale from '../../time-picker/locale/de_DE'
// Merge into a locale object
const locale = {
lang: {
placeholder: 'Datum auswählen',
rangePlaceholder: [
'Startdatum', 'Enddatum'
],
...CalendarLocale
},
timePickerLocale: {
...TimePickerLocale
}
}
// All settings at: https://github.com/ant-design/ant-design/issues/424
export default locale

View File

@ -0,0 +1,20 @@
import CalendarLocale from '../../vc-calendar/src/locale/el_GR'
import TimePickerLocale from '../../time-picker/locale/el_GR'
// Merge into a locale object
const locale = {
lang: {
placeholder: 'Επιλέξτε ημερομηνία',
rangePlaceholder: [
'Αρχική ημερομηνία', 'Τελική ημερομηνία'
],
...CalendarLocale
},
timePickerLocale: {
...TimePickerLocale
}
}
// All settings at: https://github.com/ant-design/ant-design/issues/424
export default locale

View File

@ -0,0 +1,22 @@
import CalendarLocale from '../../vc-calendar/src/locale/en_GB'
import TimePickerLocale from '../../time-picker/locale/en_GB'
// Merge into a locale object
const locale = {
lang: {
placeholder: 'Select date',
rangePlaceholder: [
'Start date', 'End date'
],
...CalendarLocale
},
timePickerLocale: {
...TimePickerLocale
}
}
// All settings at:
// https://github.com/ant-design/ant-design/blob/master/components/date-picker/l
// o cale/example.json
export default locale

View File

@ -0,0 +1,22 @@
import CalendarLocale from '../../vc-calendar/src/locale/en_US'
import TimePickerLocale from '../../time-picker/locale/en_US'
// Merge into a locale object
const locale = {
lang: {
placeholder: 'Select date',
rangePlaceholder: [
'Start date', 'End date'
],
...CalendarLocale
},
timePickerLocale: {
...TimePickerLocale
}
}
// All settings at:
// https://github.com/ant-design/ant-design/blob/master/components/date-picker/lo
// cale/example.json
export default locale

View File

@ -0,0 +1,22 @@
import CalendarLocale from '../../vc-calendar/src/locale/es_ES'
import TimePickerLocale from '../../time-picker/locale/es_ES'
// Merge into a locale object
const locale = {
lang: {
placeholder: 'Seleccionar fecha',
rangePlaceholder: [
'Fecha inicial', 'Fecha final'
],
...CalendarLocale
},
timePickerLocale: {
...TimePickerLocale
}
}
// All settings at:
// https://github.com/ant-design/ant-design/blob/master/components/date-picker/lo
// cale/example.json
export default locale

View File

@ -0,0 +1,22 @@
import CalendarLocale from '../../vc-calendar/src/locale/et_EE'
import TimePickerLocale from '../../time-picker/locale/et_EE'
// 统一合并为完整的 Locale
const locale = {
lang: {
placeholder: 'Vali kuupäev',
rangePlaceholder: [
'Algus kuupäev', 'Lõpu kuupäev'
],
...CalendarLocale
},
timePickerLocale: {
...TimePickerLocale
}
}
// All settings at:
// https://github.com/ant-design/ant-design/blob/master/components/date-picker/lo
// cale/example.json
export default locale

View File

@ -0,0 +1,38 @@
{
"lang": {
"placeholder": "Select date",
"rangePlaceholder": [
"Start date",
"End date"
],
"today": "Today",
"now": "Now",
"backToToday": "Back to today",
"ok": "Ok",
"clear": "Clear",
"month": "Month",
"year": "Year",
"timeSelect": "Select time",
"dateSelect": "Select date",
"monthSelect": "Choose a month",
"yearSelect": "Choose a year",
"decadeSelect": "Choose a decade",
"yearFormat": "YYYY",
"dateFormat": "M/D/YYYY",
"dayFormat": "D",
"dateTimeFormat": "M/D/YYYY HH:mm:ss",
"monthFormat": "MMMM",
"monthBeforeYear": true,
"previousMonth": "Previous month (PageUp)",
"nextMonth": "Next month (PageDown)",
"previousYear": "Last year (Control + left)",
"nextYear": "Next year (Control + right)",
"previousDecade": "Last decade",
"nextDecade": "Next decade",
"previousCentury": "Last century",
"nextCentury": "Next century"
},
"timePickerLocale": {
"placeholder": "Select time"
}
}

View File

@ -0,0 +1,22 @@
import CalendarLocale from '../../vc-calendar/src/locale/fa_IR'
import TimePickerLocale from '../../time-picker/locale/fa_IR'
// Merge into a locale object
const locale = {
lang: {
placeholder: 'انتخاب تاریخ',
rangePlaceholder: [
'تاریخ شروع', 'تاریخ پایان'
],
...CalendarLocale
},
timePickerLocale: {
...TimePickerLocale
}
}
// All settings at:
// https://github.com/ant-design/ant-design/blob/master/components/date-picker/l
// o cale/example.json
export default locale

View File

@ -0,0 +1,22 @@
import CalendarLocale from '../../vc-calendar/src/locale/fi_FI'
import TimePickerLocale from '../../time-picker/locale/fi_FI'
// Merge into a locale object
const locale = {
lang: {
placeholder: 'Valitse päivä',
rangePlaceholder: [
'Alku päivä', 'Loppu päivä'
],
...CalendarLocale
},
timePickerLocale: {
...TimePickerLocale
}
}
// All settings at:
// https://github.com/ant-design/ant-design/blob/master/components/date-picker/lo
// cale/example.json
export default locale

View File

@ -0,0 +1,20 @@
import CalendarLocale from '../../vc-calendar/src/locale/fr_BE'
import TimePickerLocale from '../../time-picker/locale/fr_BE'
// Merge into a locale object
const locale = {
lang: {
placeholder: 'Sélectionner une date',
rangePlaceholder: [
'Date de début', 'Date de fin'
],
...CalendarLocale
},
timePickerLocale: {
...TimePickerLocale
}
}
// All settings at: https://github.com/ant-design/ant-design/issues/424
export default locale

View File

@ -0,0 +1,20 @@
import CalendarLocale from '../../vc-calendar/src/locale/fr_FR'
import TimePickerLocale from '../../time-picker/locale/fr_FR'
// Merge into a locale object
const locale = {
lang: {
placeholder: 'Sélectionner une date',
rangePlaceholder: [
'Date de début', 'Date de fin'
],
...CalendarLocale
},
timePickerLocale: {
...TimePickerLocale
}
}
// All settings at: https://github.com/ant-design/ant-design/issues/424
export default locale

View File

@ -0,0 +1,22 @@
import CalendarLocale from '../../vc-calendar/src/locale/is_IS'
import TimePickerLocale from '../../time-picker/locale/is_IS'
// Merge into a locale object
const locale = {
lang: {
placeholder: 'Veldu dag',
rangePlaceholder: [
'Upphafsdagur', 'Lokadagur'
],
...CalendarLocale
},
timePickerLocale: {
...TimePickerLocale
}
}
// All settings at:
// https://github.com/ant-design/ant-design/blob/master/components/date-picker/l
// o cale/example.json
export default locale

View File

@ -0,0 +1,20 @@
import CalendarLocale from '../../vc-calendar/src/locale/it_IT'
import TimePickerLocale from '../../time-picker/locale/it_IT'
// Merge into a locale object
const locale = {
lang: {
placeholder: 'Selezionare la data',
rangePlaceholder: [
'Data d\'inizio', 'Data di fine'
],
...CalendarLocale
},
timePickerLocale: {
...TimePickerLocale
}
}
// All settings at: https://github.com/ant-design/ant-design/issues/424
export default locale

View File

@ -0,0 +1,21 @@
import CalendarLocale from '../../vc-calendar/src/locale/ja_JP'
import TimePickerLocale from '../../time-picker/locale/ja_JP'
const locale = {
lang: {
placeholder: '日付を選択',
rangePlaceholder: [
'開始日付', '終了日付'
],
...CalendarLocale
},
timePickerLocale: {
...TimePickerLocale
}
}
// All settings at:
// https://github.com/ant-design/ant-design/blob/master/components/date-picker/lo
// cale/example.json
export default locale

View File

@ -0,0 +1,22 @@
import CalendarLocale from '../../vc-calendar/src/locale/ko_KR'
import TimePickerLocale from '../../time-picker/locale/ko_KR'
// Merge into a locale object
const locale = {
lang: {
placeholder: '날짜 선택',
rangePlaceholder: [
'시작일', '종료일'
],
...CalendarLocale
},
timePickerLocale: {
...TimePickerLocale
}
}
// All settings at:
// https://github.com/ant-design/ant-design/blob/master/components/date-picker/l
// o cale/example.json
export default locale

View File

@ -0,0 +1,21 @@
import CalendarLocale from '../../vc-calendar/src/locale/ku_IQ'
import TimePickerLocale from '../../time-picker/locale/ku_IQ'
// Merge into a locale object
const locale = {
lang: {
placeholder: 'Dîrok hilbijêre',
rangePlaceholder: [
'Dîroka destpêkê', 'Dîroka dawîn'
],
...CalendarLocale
},
timePickerLocale: {
...TimePickerLocale
}
}
// All settings at:
// https://github.com/ant-design/ant-design/blob/master/components/date-picker/lo
// cale/example.json
export default locale

View File

@ -0,0 +1,22 @@
import CalendarLocale from '../../vc-calendar/src/locale/nb_NO'
import TimePickerLocale from '../../time-picker/locale/nb_NO'
// Merge into a locale object
const locale = {
lang: {
placeholder: 'Velg dato',
rangePlaceholder: [
'Startdato', 'Sluttdato'
],
...CalendarLocale
},
timePickerLocale: {
...TimePickerLocale
}
}
// All settings at:
// https://github.com/ant-design/ant-design/blob/master/components/date-picker/l
// o cale/example.json
export default locale

View File

@ -0,0 +1,20 @@
import CalendarLocale from '../../vc-calendar/src/locale/nl_BE'
import TimePickerLocale from '../../time-picker/locale/nl_BE'
// Merge into a locale object
const locale = {
lang: {
placeholder: 'Selecteer datum',
rangePlaceholder: [
'Begin datum', 'Eind datum'
],
...CalendarLocale
},
timePickerLocale: {
...TimePickerLocale
}
}
// All settings at: https://github.com/ant-design/ant-design/issues/424
export default locale

View File

@ -0,0 +1,20 @@
import CalendarLocale from '../../vc-calendar/src/locale/nl_NL'
import TimePickerLocale from '../../time-picker/locale/nl_NL'
// Merge into a locale object
const locale = {
lang: {
placeholder: 'Selecteer datum',
rangePlaceholder: [
'Begin datum', 'Eind datum'
],
...CalendarLocale
},
timePickerLocale: {
...TimePickerLocale
}
}
// All settings at: https://github.com/ant-design/ant-design/issues/424
export default locale

View File

@ -0,0 +1,22 @@
import CalendarLocale from '../../vc-calendar/src/locale/pl_PL'
import TimePickerLocale from '../../time-picker/locale/pl_PL'
// Merge into a locale object
const locale = {
lang: {
placeholder: 'Wybierz datę',
rangePlaceholder: [
'Data początkowa', 'Data końcowa'
],
...CalendarLocale
},
timePickerLocale: {
...TimePickerLocale
}
}
// All settings at:
// https://github.com/ant-design/ant-design/blob/master/components/date-picker/lo
// cale/example.json
export default locale

View File

@ -0,0 +1,22 @@
import CalendarLocale from '../../vc-calendar/src/locale/pt_BR'
import TimePickerLocale from '../../time-picker/locale/pt_BR'
// Merge into a locale object
const locale = {
lang: {
placeholder: 'Selecionar data',
rangePlaceholder: [
'Data de início', 'Data de fim'
],
...CalendarLocale
},
timePickerLocale: {
...TimePickerLocale
}
}
// All settings at:
// https://github.com/ant-design/ant-design/blob/master/components/date-picker/l
// o cale/example.json
export default locale

View File

@ -0,0 +1,49 @@
import CalendarLocale from '../../vc-calendar/src/locale/pt_PT'
import TimePickerLocale from '../../time-picker/locale/pt_PT'
// Merge into a locale object
const locale = {
lang: {
...CalendarLocale,
placeholder: 'Data',
rangePlaceholder: [
'Data inicial', 'Data final'
],
today: 'Hoje',
now: 'Agora',
backToToday: 'Hoje',
ok: 'Ok',
clear: 'Limpar',
month: 'Mês',
year: 'Ano',
timeSelect: 'Hora',
dateSelect: 'Selecionar data',
monthSelect: 'Selecionar mês',
yearSelect: 'Selecionar ano',
decadeSelect: 'Selecionar década',
yearFormat: 'YYYY',
dateFormat: 'D/M/YYYY',
dayFormat: 'D',
dateTimeFormat: 'D/M/YYYY HH:mm:ss',
monthFormat: 'MMMM',
monthBeforeYear: false,
previousMonth: 'Mês anterior (PageUp)',
nextMonth: 'Mês seguinte (PageDown)',
previousYear: 'Ano anterior (Control + left)',
nextYear: 'Ano seguinte (Control + right)',
previousDecade: 'Última década',
nextDecade: 'Próxima década',
previousCentury: 'Último século',
nextCentury: 'Próximo século'
},
timePickerLocale: {
...TimePickerLocale,
placeholder: 'Hora'
}
}
// All settings at:
// https://github.com/ant-design/ant-design/blob/master/components/date-picker/lo
// cale/example.json
export default locale

View File

@ -0,0 +1,25 @@
/**
* Created by Andrey Gayvoronsky on 13/04/16.
*/
import CalendarLocale from '../../vc-calendar/src/locale/ru_RU'
import TimePickerLocale from '../../time-picker/locale/ru_RU'
const locale = {
lang: {
placeholder: 'Выберите дату',
rangePlaceholder: [
'Начальная дата', 'Конечная дата'
],
...CalendarLocale
},
timePickerLocale: {
...TimePickerLocale
}
}
// All settings at:
// https://github.com/ant-design/ant-design/blob/master/components/date-picker/lo
// cale/example.json
export default locale

View File

@ -0,0 +1,22 @@
import CalendarLocale from '../../vc-calendar/src/locale/sk_SK'
import TimePickerLocale from '../../time-picker/locale/sk_SK'
// 统一合并为完整的 Locale
const locale = {
lang: {
placeholder: 'Vybrať dátum',
rangePlaceholder: [
'Od', 'Do'
],
...CalendarLocale
},
timePickerLocale: {
...TimePickerLocale
}
}
// All settings at:
// https://github.com/ant-design/ant-design/blob/master/components/date-picker/lo
// cale/example.json
export default locale

View File

@ -0,0 +1,22 @@
import CalendarLocale from '../../vc-calendar/src/locale/sr_RS'
import TimePickerLocale from '../../time-picker/locale/sr_RS'
// Merge into a locale object
const locale = {
lang: {
placeholder: 'Izaberite datum',
rangePlaceholder: [
'Početni datum', 'Krajnji datum'
],
...CalendarLocale
},
timePickerLocale: {
...TimePickerLocale
}
}
// All settings at:
// https://github.com/ant-design/ant-design/blob/master/components/date-picker/lo
// cale/example.json
export default locale

View File

@ -0,0 +1,21 @@
import CalendarLocale from '../../vc-calendar/src/locale/sv_SE'
import TimePickerLocale from '../../time-picker/locale/sv_SE'
const locale = {
lang: {
placeholder: 'Välj datum',
rangePlaceholder: [
'Startdatum', 'Slutdatum'
],
...CalendarLocale
},
timePickerLocale: {
...TimePickerLocale
}
}
// All settings at:
// https://github.com/ant-design/ant-design/blob/master/components/date-picker/lo
// cale/example.json
export default locale

View File

@ -0,0 +1,18 @@
import CalendarLocale from '../../vc-calendar/src/locale/th_TH'
import TimePickerLocale from '../../time-picker/locale/th_TH'
import assign from 'object-assign'
// Merge into a locale object
const locale = {
lang: assign({
placeholder: 'เลือกวันที่',
rangePlaceholder: ['วันเริ่มต้น', 'วันสิ้นสุด']
}, CalendarLocale),
timePickerLocale: assign({}, TimePickerLocale)
}
// All settings at:
// https://github.com/ant-design/ant-design/blob/master/components/date-picker/lo
// cale/example.json
export default locale

View File

@ -0,0 +1,22 @@
import CalendarLocale from '../../vc-calendar/src/locale/en_US'
import TimePickerLocale from '../../time-picker/locale/tr_TR'
// Merge into a locale object
const locale = {
lang: {
placeholder: 'Tarih Seç',
rangePlaceholder: [
'Başlangıç Tarihi', 'Bitiş Tarihi'
],
...CalendarLocale
},
timePickerLocale: {
...TimePickerLocale
}
}
// All settings at:
// https://github.com/ant-design/ant-design/blob/master/components/date-picker/l
// o cale/example.json
export default locale

View File

@ -0,0 +1,21 @@
import CalendarLocale from '../../vc-calendar/src/locale/uk_UA'
import TimePickerLocale from '../../time-picker/locale/uk_UA'
const locale = {
lang: {
placeholder: 'Оберіть дату',
rangePlaceholder: [
'Початкова дата', 'Кінцева дата'
],
...CalendarLocale
},
timePickerLocale: {
...TimePickerLocale
}
}
// All settings at:
// https://github.com/ant-design/ant-design/blob/master/components/date-picker/lo
// cale/example.json
export default locale

View File

@ -0,0 +1,22 @@
import CalendarLocale from '../../vc-calendar/src/locale/en_US'
import TimePickerLocale from '../../time-picker/locale/en_US'
// Merge into a locale object
const locale = {
lang: {
placeholder: 'Chọn thời điểm',
rangePlaceholder: [
'Ngày bắt đầu', 'Ngày kết thúc'
],
...CalendarLocale
},
timePickerLocale: {
...TimePickerLocale
}
}
// All settings at:
// https://github.com/ant-design/ant-design/blob/master/components/date-picker/lo
// cale/example.json
export default locale

View File

@ -0,0 +1,24 @@
import CalendarLocale from '../../vc-calendar/src/locale/zh_CN'
import TimePickerLocale from '../../time-picker/locale/zh_CN'
const locale = {
lang: {
placeholder: '请选择日期',
rangePlaceholder: [
'开始日期', '结束日期'
],
...CalendarLocale
},
timePickerLocale: {
...TimePickerLocale
}
}
// should add whitespace between char in Button
locale.lang.ok = '确 定'
// All settings at:
// https://github.com/ant-design/ant-design/blob/master/components/date-picker/l
// o cale/example.json
export default locale

View File

@ -0,0 +1,23 @@
import CalendarLocale from '../../vc-calendar/src/locale/zh_TW'
import TimePickerLocale from '../../time-picker/locale/zh_TW'
const locale = {
lang: {
placeholder: '請選擇日期',
rangePlaceholder: [
'開始日期', '結束日期'
],
...CalendarLocale
},
timePickerLocale: {
...TimePickerLocale
}
}
locale.lang.ok = '確 定'
// All settings at:
// https://github.com/ant-design/ant-design/blob/master/components/date-picker/l
// o cale/example.json
export default locale

View File

@ -102,3 +102,5 @@ export { api }
import Steps from './steps'
const { Step } = Steps
export { Steps, Step }
export { default as Calendar } from './calendar'

View File

@ -1,8 +1,7 @@
import Radio from './Radio.vue'
import RadioGroup from './Group.vue'
import Radio from './Radio'
import Group from './Group'
Radio.Group = RadioGroup
Radio.Button = {
const Button = {
extends: Radio,
props: {
...Radio.props,
@ -12,5 +11,8 @@ Radio.Button = {
},
},
}
Radio.Group = Group
Radio.Button = Button
export { Button, Group }
export default Radio

View File

@ -32,3 +32,4 @@ import './alert/style'
import './time-picker/style'
import './steps/style'
import './breadcrumb/style'
import './calendar/style'

View File

@ -1,4 +1,4 @@
import { placements as rcPlacements } from './src/placements'
import { placements as rcPlacements } from '../vc-tooltip/placements'
const autoAdjustOverflowEnabled = {
adjustX: 1,

View File

@ -32,3 +32,4 @@ export { default as modal } from 'antd/modal/demo/index.vue'
export { default as alert } from 'antd/alert/demo/index.vue'
export { default as timePicker } from 'antd/time-picker/demo/index.vue'
export { default as steps } from 'antd/steps/demo/index.vue'
export { default as calendar } from 'antd/calendar/demo/index.vue'

View File

@ -3,7 +3,7 @@ const AsyncComp = () => {
const hashs = window.location.hash.split('/')
const d = hashs[hashs.length - 1]
return {
component: import(`../components/steps/demo/${d}`),
component: import(`../components/calendar/demo/${d}`),
}
}
export default [