按照慣例糠悼，先上效果圖
calendar.gif
dot.gif
week.gif
vue 版本同款日歷：https://github.com/TangSY/vue-hash-calendar
react-hash-calendar
- 支持手勢(shì)滑動(dòng)操作
- 上下滑動(dòng) 切換 周/月 模式
【周模式中】 左右滑動(dòng)可切換 上一周/下一周
【月模式中】 左右滑動(dòng)可切換 上一月/下一月
安裝使用說(shuō)明
npm i react-hash-calendar
Demo
demo_qrcode.png
或者請(qǐng)用瀏覽器的手機(jī)模式查看：https://www.hxkj.vip/demo/react-calendar/
- ?? 覺(jué)得好用可以給一個(gè) star 哦~~ ??
github 地址：https://github.com/TangSY/react-hash-calendar
API
| 屬性 | 說(shuō)明 | 類(lèi)型 | 默認(rèn) |
|---|---|---|---|
| visible | 控制日歷組件的顯示或隱藏,需使用 .sync 修飾符 |
boolean | false |
| onVisibleChange | 日歷顯示狀態(tài)改變時(shí)調(diào)用藐不，參數(shù)為 { visible } | (visible: boolean) => void | - |
| scrollChangeDate | 控制滑動(dòng)的時(shí)候是否修改選中的日期 | boolean | true |
| model | 日歷組件以哪種形式展示滋恬。inline：內(nèi)聯(lián)的方式聊训。dialog：彈窗的方式 | string | inline |
| defaultDatetime | 指定默認(rèn)時(shí)間。 | Date | now |
| format | 確認(rèn)日期時(shí)恢氯，回調(diào)事件返回的日期格式带斑。如“YY/MM/DD hh:mm” 、“YY 年 MM 月第 DD 天勋拟，當(dāng)前時(shí)間 hh 時(shí) mm 分”勋磕、“MM DD,YY at hh:mm F” | string | YY/MM/DD hh:mm |
| weekStart | 以星期幾作為日歷每一周的起始星期「颐遥可選['sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday'] | string | sunday |
| pickerType | 選擇器類(lèi)型 datetime：日期+時(shí)間 date：日期 time：時(shí)間 | string | datetime |
| showTodayButton | 是否顯示返回今日按鈕 | boolean | true |
| isShowWeekView | 是否以周視圖展示組件 | boolean | false |
| isShowAction | 是否顯示日歷組件操作欄（標(biāo)題欄） | boolean | true |
| disabledWeekView | 禁用周視圖（設(shè)置為 true 后朋凉，無(wú)法上下滑動(dòng)進(jìn)行周/月切換） | boolean | false |
| disabledDate | 設(shè)置日期的禁用狀態(tài)，參數(shù)為當(dāng)前日期醋安，要求返回 boolean （禁用該日期需返回 true） | Function | - |
| disabledScroll | 設(shè)置日歷的禁止滑動(dòng)方向∧苟荆可選['left', 'right', 'up', 'down', 'horizontal', 'vertical', 'all', ''] 吓揪。可取其一控制單個(gè)方向所计。 | string | '' |
| markDate | 需要被標(biāo)記的日期柠辞，可按不同顏色不同標(biāo)記類(lèi)型分組標(biāo)記（不分組默認(rèn)藍(lán)色）。如：[{color: 'red',date: ['2019/02/25']},{color: 'blue',type: 'dot',date: ['2019/01/20']},'2019/03/20'] | Array | [] |
| markType | 標(biāo)記圖案類(lèi)型 dot：小圓點(diǎn)（日期下方小圓點(diǎn)標(biāo)記） circle：小圓圈（日期被小圓圈包圍） dot+circle：同時(shí)使用小圓點(diǎn)與圓圈標(biāo)記 | string | dot |
| minuteStep | 間隔時(shí)間主胧。（分鐘的步長(zhǎng)） | number | 1 |
| lang | 選擇的語(yǔ)言版本叭首∠扒冢可選值:['CN', 'EN'] | string | CN |
| dateClickCallback | 日歷被點(diǎn)擊時(shí)調(diào)用，參數(shù)為 { date }焙格。（返回的日期格式取決于 format 屬性） | (date: Date | string) => void | - |
| dateConfirmCallback | 點(diǎn)擊確定按鈕時(shí)調(diào)用图毕，參數(shù)為 { date }。（返回的日期格式取決于 format 屬性） | (date: Date | string) => void | - |
| touchStartCallback | 開(kāi)始滑動(dòng)日歷時(shí)調(diào)用眷唉，參數(shù)為 { event } | (event: React.TouchEvent) => void | - |
| touchMoveCallback | 日歷滑動(dòng)中時(shí)調(diào)用予颤，參數(shù)為 { event } | (event: React.TouchEvent) => void | - |
| touchEndCallback | 日歷滑動(dòng)結(jié)束時(shí)調(diào)用，參數(shù)為 { event } | (event: React.TouchEvent) => void | - |
| slideChangeCallback | 日歷滑動(dòng)的方向冬阳，參數(shù)為 { direction }蛤虐。（返回值有 right、left肝陪、up驳庭、down 其中之一） | (direction: string) => void | - |
| weekSlot | 自定義星期內(nèi)容。例如可用于自定義星期樣式等等氯窍，參數(shù)為 { week }饲常。 | (week: string) => React.ReactNode | - |
| daySlot | 自定義日期內(nèi)容。例如可用于添加農(nóng)歷之類(lèi)的荞驴。參數(shù)為 { date, extendAttr }不皆，其中 extendAttr 參數(shù)包含 isMarked（該日期是否被標(biāo)記）、isDisabledDate（該日期是否被禁用）熊楼、isToday（該日期是否為今天）霹娄、isChecked（該日期是否被選中）、isCurrentMonthDay（該日期是否為本月日期）鲫骗、isFirstDayOfMonth（該日期是否為當(dāng)月第一天）犬耻，可用于一些特殊需求 |
(date, extendAttr) => React.ReactNode | - |
| todaySlot | 自定義 "今天" 按鈕文字內(nèi)容以及樣式 | () => React.ReactNode | - |
| confirmSlot | 自定義 "確定" 按鈕文字內(nèi)容以及樣式 | () => React.ReactNode | - |
| actionSlot | 自定義操作欄（標(biāo)題欄）內(nèi)容以及樣式 | () => React.ReactNode | - |
Other
- 如果有其他問(wèn)題， 或者功能上不兼容的执泰≌泶牛可以郵件溝通 t@tsy6.com，或者 github 提交 issue术吝。
