react-hash-calendar，移動端日期時間選擇插件
按照慣例，先上效果圖
vue 版本同款日曆：//github.com/TangSY/vue-hash-calendar
react-hash-calendar
- 支援手勢滑動操作
- 上下滑動 切換 周/月 模式
【周模式中】 左右滑動可切換 上一周/下一周
【月模式中】 左右滑動可切換 上一月/下一月
安裝使用說明
npm i react-hash-calendar
Demo
或者請用瀏覽器的手機模式查看：//www.hxkj.vip/demo/react-calendar/
- 🎉 覺得好用可以給一個 star 哦~~ 🎉
github 地址：//github.com/TangSY/react-hash-calendar
API
| 屬性 | 說明 | 類型 | 默認 |
|---|---|---|---|
| visible | 控制日曆組件的顯示或隱藏,需使用 .sync 修飾符 |
boolean | false |
| onVisibleChange | 日曆顯示狀態改變時調用，參數為 { visible } | (visible: boolean) => void | – |
| scrollChangeDate | 控制滑動的時候是否修改選中的日期 | boolean | true |
| model | 日曆組件以哪種形式展示。inline：內聯的方式。dialog：彈窗的方式 | string | inline |
| defaultDatetime | 指定默認時間。 | Date | now |
| format | 確認日期時，回調事件返回的日期格式。如「YY/MM/DD hh:mm」 、「YY 年 MM 月第 DD 天，當前時間 hh 時 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 | 選擇器類型 datetime：日期+時間 date：日期 time：時間 | string | datetime |
| showTodayButton | 是否顯示返回今日按鈕 | boolean | true |
| isShowWeekView | 是否以周視圖展示組件 | boolean | false |
| isShowAction | 是否顯示日曆組件操作欄（標題欄） | boolean | true |
| disabledWeekView | 禁用周視圖（設置為 true 後，無法上下滑動進行周/月切換） | boolean | false |
| disabledDate | 設置日期的禁用狀態，參數為當前日期，要求返回 boolean （禁用該日期需返回 true） | Function | – |
| disabledScroll | 設置日曆的禁止滑動方向。可選[‘left’, ‘right’, ‘up’, ‘down’, ‘horizontal’, ‘vertical’, ‘all’, ”] 。可取其一控制單個方向。 | string | ” |
| markDate | 需要被標記的日期，可按不同顏色不同標記類型分組標記（不分組默認藍色）。如：[{color: ‘red’,date: [‘2019/02/25’]},{color: ‘blue’,type: ‘dot’,date: [‘2019/01/20′]},’2019/03/20’] | Array | [] |
| markType | 標記圖案類型 dot：小圓點（日期下方小圓點標記） circle：小圓圈（日期被小圓圈包圍） dot+circle：同時使用小圓點與圓圈標記 | string | dot |
| minuteStep | 間隔時間。（分鐘的步長） | number | 1 |
| lang | 選擇的語言版本。可選值:[‘CN’, ‘EN’] | string | CN |
| dateClickCallback | 日曆被點擊時調用，參數為 { date }。（返回的日期格式取決於 format 屬性） | (date: Date | string) => void | – |
| dateConfirmCallback | 點擊確定按鈕時調用，參數為 { date }。（返回的日期格式取決於 format 屬性） | (date: Date | string) => void | – |
| touchStartCallback | 開始滑動日曆時調用，參數為 { event } | (event: React.TouchEvent) => void | – |
| touchMoveCallback | 日曆滑動中時調用，參數為 { event } | (event: React.TouchEvent) => void | – |
| touchEndCallback | 日曆滑動結束時調用，參數為 { event } | (event: React.TouchEvent) => void | – |
| slideChangeCallback | 日曆滑動的方向，參數為 { direction }。（返回值有 right、left、up、down 其中之一） | (direction: string) => void | – |
| weekSlot | 自定義星期內容。例如可用於自定義星期樣式等等，參數為 { week }。 | (week: string) => React.ReactNode | – |
| daySlot | 自定義日期內容。例如可用於添加農曆之類的。參數為 { date, extendAttr }，其中 extendAttr 參數包含 isMarked（該日期是否被標記）、isDisabledDate（該日期是否被禁用）、isToday（該日期是否為今天）、isChecked（該日期是否被選中）、isCurrentMonthDay（該日期是否為本月日期）、isFirstDayOfMonth（該日期是否為當月第一天），可用於一些特殊需求 |
(date, extendAttr) => React.ReactNode | – |
| todaySlot | 自定義 “今天” 按鈕文字內容以及樣式 | () => React.ReactNode | – |
| confirmSlot | 自定義 “確定” 按鈕文字內容以及樣式 | () => React.ReactNode | – |
| actionSlot | 自定義操作欄（標題欄）內容以及樣式 | () => React.ReactNode | – |
Other
- 如果有其他問題， 或者功能上不兼容的。可以郵件溝通 [email protected]，或者 github 提交 issue。
贊助
