react-hash-calendar，移動端日期時間選擇插件

按照慣例，先上效果圖

vue 版本同款日曆：https://github.com/TangSY/vue-hash-calendar

react-hash-calendar

• 支持手勢滑動操做

• 上下滑動 切換 周/月 模式

  【周模式中】 左右滑動可切換 上一週/下一週
  【月模式中】 左右滑動可切換 上一月/下一月

安裝使用說明

npm i react-hash-calendar

Demo

或者請用瀏覽器的手機模式查看：https://www.hxkj.vip/demo/react-calendar/

• 🎉 以爲好用能夠給一個 star 哦~~ 🎉

github 地址：https://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

• 若是有其餘問題， 或者功能上不兼容的。能夠郵件溝通 t@tsy6.com，或者 github 提交 issue。

贊助