1.0.6 • Published 6 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 |