@ datepicker- react/ hooks (英语)
开始
安装
yarn add @datepicker-react/hooks
包含钩子
import {useDatepicker, useMonth, useDay} from '@datepicker-react/hooks'
示例(编码框)
文章
useDatepicker
这个 useDatepicker 钩子返回函数如 goToPreviousMonths, (中文(简体) ), goToNextMonths等,哪些
允许我们控制取枣者.
useDatepickerProps
onDatesChange: (data: OnDatesChangeProps) => void
选定日期时触发回调( N)onDaySelect) (中文(简体) ).
minBookingDate: Date | undefined
如果设置了道具, 那么所有日期之前 minBookingDate 已禁用.
maxBookingDate: Date | undefined
如果设置了道具, 那么所有日期 : maxBookingDate 已禁用.
startDate: Date | null
当前开始日期 .
endDate: Date | null
目前结束日期.
focusedInput: 'startDate' | 'endDate' | null
目前的重点日期.
numberOfMonths: number | undefined (Default: 2)
可见月数.
minBookingDays: number | undefined (Default: 1)
允许的最低日期范围为天数.
exactMinBookingDays: boolean | undefined (Default: false)
若为 exactMinBookingDays 实值 true,那么日期范围总是与 minBookingDays。 。 。 .
firstDayOfWeek: 0 | 1 | 2 | 3 | 4 | 5 | 6 (Default: 1 - Monday)
礼拜一日.
initialVisibleMonth? Date
初始可见月份
isDateBlocked: (date: Date) => boolean
若为 isDateBlocked 返回时 true,则日期被屏蔽.
changeActiveMonthOnSelect?: boolean
如果这是虚假的, 活动月面板在选择开始日期时不会更改 .
unavailableDates?: Date[]
在数组中接收无法使用的日期 .
useDatepickerResult
firstDayOfWeek: 0 | 1 | 2 | 3 | 4 | 5 | 6
礼拜一日.
activeMonths: ({year: number, month: number})[]
Array 可见的月份。 每月是一个包含 year 财务报告和审定财务报表 month。 。 。 .
numberOfMonths: number
Number 可见的月份.
focusedDate: Date | null
专注日期.
isDateSelected: (date: Date) => boolean
回返 true 如果选定日期或选定范围内的日期,否则 false。 。 。 .
isDateHovered: (date: Date) => boolean
回返 true 如果一个日期被徘徊, 否则 false。 。 。 .
isDateBlocked: (date: Date) => boolean
回返 true 如果日期被封锁,否则 false。 。 。 .
isDateFocused: (date: Date) => boolean
回返 true 如果一个日期被聚焦,否则 false。 。 。 .
isFirstOrLastSelectedDate: (date: Date) => boolean
回返 true 如果一个日期是选定范围内的第一个或最后一个日期,否则 false。 。 。 .
isStartDate: (date: Date) => boolean
回返 true 如果一个日期是选定范围内的第一个或最后一个日期,否则 false。 。 。 .
isEndDate: (date: Date) => boolean
回返 true 如果一个日期是选定范围内的第一个或最后一个日期,否则 false。 。 。 .
onResetDates: () => void
重置起止日期 .
onDateHover: (date: Date) => void
内部设置 hovered 状态.
onDateSelect: (date: Date) => void
选择日期。 选择哪个日期,取决于 focusedInput。 。 。 .
onDateFocus: (date: Date) => void
设定 focusedDate。 。 。 .
goToDate: (date: Date) => void
更新 activeMonths 具体日期.
goToNextMonths: () => void
更新 activeMonths (下个月) numberOfMonths 道具 (英语).
goToNextMonthsByOneMonth: () => void
更新 activeMonths (后数月)取一月.
goToPreviousMonths: () => void
更新 activeMonths (前几个月) numberOfMonths 道具 (英语).
goToPreviousMonthsByOneMonth: () => void
更新 activeMonths (前数月)取一月.
goToPreviousYear: (numYears: number = 1) => void
默认转入上一年.
goToNextYear: (numYears: number = 1) => void
到来年默认.
useMonth
这个 useMonth 返回月份的所有天数、工作日标签和月份标签.
useMonthProps
year
年份
month
月数
firstDayOfWeek: number | undefined (Default: 1)
礼拜一日.
dayLabelFormat: (date: Date) => string | undefined (Default: (date: Date) => format(date, 'MMMM yyyy'))
格式化日标签.
weekdayLabelFormat: (date: Date) => string | undefined (Default: (date: Date) => format(date, 'eeeeee'))
格式化工作日标签.
monthLabelFormat: (date: Date) => string | undefined (Default: (date: Date) => format(date, 'dd'))
格式月标签.
useMonthResult
days: ({date: Date, dayLabel: string})[]
Array 日用对象。 每个对象包含 date 财务报告和审定财务报表 dayLabel。 。 。 .
weekdayLabels: (string)[]
Array 工作日标签.
monthLabel: string
月标签.
useDay
useDayProps
date: Date
日期
dayRef: React.RefObject<HTMLButtonElement>
Ref 一天的按钮.
focusedDate: Date | null
isDateFocused: (date: Date) => boolean
isDateSelected: (date: Date) => boolean
isDateHovered: (date: Date) => boolean
isDateBlocked: (date: Date) => boolean
isFirstOrLastSelectedDate: (date: Date) => boolean
onDateFocus: (date: Date) => void
onDateSelect: (date: Date) => void
onDateHover: (date: Date) => void
useDayResult
tabIndex: 0 | -1
tabIndex 将按钮传递到白天 tabIndex。 。 。 .
onKeyDown: (e: KeyboardEvent) => void
onKeyDown 调用可以传递到当天按钮 onKeyDown。 。 。 .
onClick: () => void
onClick 调用到当天按钮 onClick。 。 。 .
onMouseEnter: () => void
onMouseEnter 调用到当天按钮 onMouseEnter。 。 。 .
disabledDate: boolean
若为 true,则日期被禁用.
isWithinHoverRange: boolean
若为 true,则日期在徘徊范围内.
isSelectedStartOrEnd: boolean
若为 true,然后该日期是第一个或最后一个选定的日期.
isSelected: boolean
若为 true,然后选择日期.
谁用
生命史记
@ datepicker- react/ styled (已删除)
许可证
获得麻省理工学院许可,版权为2019年至今的Miha Sedej.
见 自由主义 更多信息.