Skip to content

Commit

Permalink
fix(calendar): 新增日历 onSelectDate 方法
Browse files Browse the repository at this point in the history
  • Loading branch information
@SzHeJason
SzHeJason committed Jan 17, 2019
1 parent 9aa5f97 commit 6e9ad74
Show file tree
Hide file tree
Showing 4 changed files with 61 additions and 34 deletions.
47 changes: 24 additions & 23 deletions docs/markdown/calendar.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@

该组件提供日历选择功能（包括范围选择）

> 注意目前 h5 和 小程序 实现的方案不一致 可能导致效果不同 和 部分API 无法使用 具体效果请看 h5 上的展示
> 注意目前 h5 和 小程序 实现的方案不一致 可能导致效果不同 和 部分 API 无法使用 具体效果请看 h5 上的展示
## 使用指南

Expand Down Expand Up @@ -33,7 +33,7 @@ import { AtCalendar } from "taro-ui"
:::demo

```html
<AtCalendar currentDate='2018/11/11' />
<AtCalendar currentDate="2018/11/11" />
```

:::
Expand All @@ -43,7 +43,7 @@ import { AtCalendar } from "taro-ui"
:::demo

```html
<AtCalendar minDate='2018/1/1' maxDate='2018/10/1' />
<AtCalendar minDate="2018/1/1" maxDate="2018/10/1" />
```

:::
Expand All @@ -63,7 +63,7 @@ import { AtCalendar } from "taro-ui"
:::demo

```html
<AtCalendar isSwiper={false} />
<AtCalendar isSwiper="{false}" />
```

:::
Expand Down Expand Up @@ -100,25 +100,26 @@ interface SelectDate {
}
```

| 参数 | 说明 | 类型 | 默认值 |
| ----------- | -------------- | ------------------------------- | ------------ |
| currentDate | 当前的时间 | `DateArg | SelectDate` | `Date.now()` |
| minDate | 最小的可选时间 | `DateArg` | - |
| maxDate | 最大的可选时间 | `DateArg` | - |
| isSwiper | 是否可以滑动 | `boolean` | `true` |
| marks | 需要标记的时间 | `Array<{'{ value: DateArg }'}>` | `[]` |
| format | 日期格式 | `string` | `YYYY-MM-DD` |
| monthFormat | 月份格式 | `string` | `YYYY年MM月` |
| hideArrow | 是否隐藏箭头 | `boolean` | `false` |
| isVertical | 是否垂直滑动 | `boolean` | `false` |
| isMultiSelect | 是否范围选择 | `boolean` | `false` |
| 参数 | 说明 | 类型 | 默认值 |
| ------------- | -------------- | ------------------------------- | ------------ |
| currentDate | 当前的时间 | `DateArg | SelectDate` | `Date.now()` |
| minDate | 最小的可选时间 | `DateArg` | - |
| maxDate | 最大的可选时间 | `DateArg` | - |
| isSwiper | 是否可以滑动 | `boolean` | `true` |
| marks | 需要标记的时间 | `Array<{'{ value: DateArg }'}>` | `[]` |
| format | 日期格式 | `string` | `YYYY-MM-DD` |
| monthFormat | 月份格式 | `string` | `YYYY年MM月` |
| hideArrow | 是否隐藏箭头 | `boolean` | `false` |
| isVertical | 是否垂直滑动 | `boolean` | `false` |
| isMultiSelect | 是否范围选择 | `boolean` | `false` |

## AtCalendar 事件

| 参数 | 说明 | 类型 | 默认值 |
| ---------------- | ---------------------------- | ------------------------- | ------ |
| onClickPreMonth | 点击箭头去上一个月的时候触发 | `() => void` | - |
| onClickNextMonth | 点击箭头去下一个月的时候触发 | `() => void` | - |
| onDayClick | 点击日期时候触发 | `(item: {'{ value: string }'}) => void` | - |
| onDayLongClick | 长按日期时触发 | `(item: {'{ value: string }'}) => void` | - |
| onMonthChange | 月份改变时触发 | `(value: string) => void` | - |
| 参数 | 说明 | 类型 | 默认值 |
| ---------------- | ---------------------------- | --------------------------------------- | ------ |
| onClickPreMonth | 点击箭头去上一个月的时候触发 | `() => void` | - |
| onClickNextMonth | 点击箭头去下一个月的时候触发 | `() => void` | - |
| onDayClick | 点击日期时候触发 | `(item: {'{ value: string }'}) => void` | - |
| onDayLongClick | 长按日期时触发 | `(item: {'{ value: string }'}) => void` | - |
| onMonthChange | 月份改变时触发 | `(value: string) => void` | - |
| onSelectDate | 选中日期时候触发 | `(value: SelectDate) => void` | - |
38 changes: 29 additions & 9 deletions src/components/calendar/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,18 +82,19 @@ export default class AtCalendar extends Taro.Component<Props, Readonly<State>> {
}

@bind
private getMultiSelectedState (value: Dayjs): Partial<State> {
private getMultiSelectedState (value: Dayjs): Pick<State, 'selectedDate'> {
const { selectedDate } = this.state
const { end } = selectedDate

const valueUnix: number = value.valueOf()
const state: Partial<State> = {}
const state: Pick<State, 'selectedDate'> = {
selectedDate
}

if (end) {
state.selectedDate = this.getSelectedDate(valueUnix, 0)
} else {
selectedDate.end = valueUnix
state.selectedDate = selectedDate
state.selectedDate.end = valueUnix
}

return state
Expand Down Expand Up @@ -158,7 +159,7 @@ export default class AtCalendar extends Taro.Component<Props, Readonly<State>> {
}

@bind
setGenerateDate (vectorCount: number) {
setMonth (vectorCount: number) {
const { format } = this.props
const { generateDate } = this.state

Expand All @@ -179,7 +180,7 @@ export default class AtCalendar extends Taro.Component<Props, Readonly<State>> {
return
}

this.setGenerateDate(-1)
this.setMonth(-1)

if (_isFunction(this.props.onClickPreMonth)) {
this.props.onClickPreMonth()
Expand All @@ -192,7 +193,7 @@ export default class AtCalendar extends Taro.Component<Props, Readonly<State>> {
return
}

this.setGenerateDate(1)
this.setMonth(1)

if (_isFunction(this.props.onClickNextMonth)) {
this.props.onClickNextMonth()
Expand Down Expand Up @@ -232,13 +233,32 @@ export default class AtCalendar extends Taro.Component<Props, Readonly<State>> {
stateValue = this.getSingleSelectdState(dayjsDate)
}

this.setState(stateValue as State)
this.setState(stateValue as State, () => {
this.handleSelectedDate()
})

if (_isFunction(this.props.onDayClick)) {
this.props.onDayClick({ value: item.value })
}
}

handleSelectedDate () {
const selectDate = this.state.selectedDate
if (_isFunction(this.props.onSelectDate)) {
const info: Calendar.SelectedDate = {
start: dayjs(selectDate.start).format(this.props.format)
}

if (selectDate.end) {
info.end = dayjs(selectDate.end).format(this.props.format)
}

this.props.onSelectDate({
value: info
})
}
}

@bind
handleDayLongClick (item: Calendar.Item) {
if (_isFunction(this.props.onDayLongClick)) {
Expand Down Expand Up @@ -284,7 +304,7 @@ export default class AtCalendar extends Taro.Component<Props, Readonly<State>> {
selectedDates={selectedDates}
generateDate={generateDate}
onDayClick={this.handleDayClick}
onSwipeMonth={this.setGenerateDate}
onSwipeMonth={this.setMonth}
onLongClick={this.handleDayLongClick}
/>
</View>
Expand Down
2 changes: 2 additions & 0 deletions src/components/calendar/interface.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,8 @@ export interface PropsBase {

onClickNextMonth?: () => void

onSelectDate?: (item: { value: Calendar.SelectedDate }) => void

onDayClick?: (item: { value: string }) => void

onDayLongClick?: (item: { value: string }) => void
Expand Down
8 changes: 6 additions & 2 deletions src/pages/advanced/calendar/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -152,14 +152,18 @@ export default class Index extends Component {
<View className='panel'>
<View className='panel__title'>垂直滑动</View>
<View className='panel__content'>
<AtCalendar isVertical />
<AtCalendar isVertical onSelectDate={this.handleDateChange}/>
</View>
</View>

<View className='panel'>
<View className='panel__title'>范围选择</View>
<View className='panel__content'>
<AtCalendar isMultiSelect currentDate={multiCurentDate} />
<AtCalendar
onSelectDate={this.handleDateChange}
isMultiSelect
currentDate={multiCurentDate}
/>
<View className='body_controllers'>
<AtButton
size='small'
Expand Down

0 comments on commit 6e9ad74

Please sign in to comment.