1.0.6 • Published 7 years ago
test-wang v1.0.6
效果图


安装组件
npm install weekcalendar --save引入组件
import Weekcalendar from 'weekcalendar'使用组件
<WeekCalendar selectedDate="20180510"
onWeekDateChange={this.viewModel.onWeekDateChange}
beforeGoNextWeek={this.viewModel.beforeGoNextWeek}
afterGoLastWeek={this.viewModel.afterGoLastWeek}
afterGoNextWeek={this.viewModel.afterGoNextWeek}
afterCalendarSelect={this.viewModel.afterCalendarSelect}
></WeekCalendar> onWeekDateChange(selectedDate){
console.log(selectedDate);
}
afterGoLastWeek(selectedDate){
console.log(selectedDate);
}
beforeGoNextWeek(){
return true;
}
afterGoNextWeek(selectedDate){
console.log(selectedDate);
}
afterCalendarSelect(selectedDate){
console.log(selectedDate);
}组件属性
| 属性 | 描述 | 类型 | 默认值 | 必选 |
|---|---|---|---|---|
| enterDirection | 入场方向 vertical: 垂直 horizontal: 水平 | 'horizontal'/'vertical' | horizontal | false |
| selectedDate | 初始化日期(格式:YYYYMMDD) | string | today | false |
| disable | 日历是否可用 | boolean | false | false |
| hideArrowLeft | 是否隐藏左箭头 | boolean | false | false |
| hideArrowRight | 是否隐藏右箭头 | boolean | false | false |
| minDate | 最小日期 | Date | false | |
| maxDate | 最大日期 | Date | false | |
| rowSize | 行大小 | 'normal' | 'xl' | 'normal' | false |
| initalMonths | 初始化月个数 | number | 2 | false |
| onWeekDateChange | 切换周日期时回调 | (dateStr) => void | false | |
| beforeGoLastWeek | 切换上一周前回调 ,返回true则继续切换上一周,否则不切换 | () => boolean | false | |
| afterGoLastWeek | 切换上一周后回调 | (dateStr) => void | false | |
| beforeGoNextWeek | 切换下一周前回调,返回true则继续切换下一周,否则不切换 | () => boolean | false | |
| afterGoNextWeek | 切换下一周后回调 | (dateStr) => void | false | |
| beforeShowCalendar | 打开日历前回调,返回true则继续打开日历,否则不打开日历 | (dateStr) => boolean | false | |
| afterCalendarSelect | 选中日历日期后回调 | (dateStr) => void | false |