chakra dayzed datepicker

基于 Dayzed 的简单 Chakra 日期选择器。

每个单独的组件都使用 Chakra UI。所以它应该毫无问题地尊重所有 Chakra UI 配置。

组件本身必须使用一些date库

强烈建议您只需从/src复制/粘贴源代码即可进行自定义。

安装依赖项

尼普

npm i date-fns dayzed

npm i chakra-dayzed-datepicker

纱：

yarn add date-fns dayzed

yarn add chakra-dayzed-datepicker

基本用法

单身的

  从“chakra-dayzed-datepicker”导入{ SingleDatepicker }；

  const [日期，setDate] = useState(new Date());

    

范围：

请注意，该列表在选择过程中将具有一个值。如果您尝试直接将其控制为[startDate, endDate]您的系统将无法工作，因为我们将尝试将selectedDates设置为[intermediateSelection]并且生成的selectedDates的长度对日期选择器有意义。

  从“chakra-dayzed-datepicker”导入{RangeDatepicker}；

    const [selectedDates, setSelectedDates] = useState([new Date(), new Date()]);

    

道具配置：

dateNavBtnProps扩展自 Chakra-UI 的ButtonProps这允许您根据需要覆盖默认行为，只要 Chakra-UI 支持即可。

 dayOfMonthBtnProps = {
  默认Btn属性，
  isInRangeBtnProp,
  选定的BtnProps，
  今天BtnProps}

dayOfMonthBtnProps允许您根据状态自定义日期 btn 样式。
样式优先级： default < isInRange < seleted < today 。

当您想要全局设置一些简单的样式（例如文本颜色）时， popoverCompProps可能很有用

popoverCompProps = {
  弹出内容道具，
  弹出框BodyProps}

总结一下：

  propsConfigs={{dateNavBtnProps: {},dayOfMonthBtnProps: { defaultBtnProps: {}, isInRangeBtnProps: {}, selectedBtnProps: {}, TodayBtnProps: {}},inputProps: {},popoverCompProps: { popoverContentProps: {}, popoverBodyProps: {} },calendarPanelProps: { wrapperProps：{}，contentProps：{}，headerProps：{}，dividerProps：{}，}，weekdayLabelProps：{}，dateHeadingProps：{}
  }}

例子：

  propsConfigs = {{dateNavBtnProps：{ colorScheme：“蓝色”，变体：“轮廓”}，dayOfMonthBtnProps：{defaultBtnProps：{borderColor：“red.300”，_hover：{背景：'blue.400'，} }，isInRangeBtnProps： {颜色：“黄色”，}，selectedBtnProps：{背景： "blue.200",color: "green", }, TodayBtnProps: {background: "teal.400", }},inputProps: { size: "sm"},popoverCompProps: { popoverContentProps: {background: "gray.700" ",color: "白色", },},calendarPanelProps: {wrapperProps: {borderColor: '绿色', }, contentProps: {borderWidth: 0, }, headerProps: {padding: '5px', },dividerProps: {display: "none", },},weekdayLabelProps: { fontWeight: '正常'},dateHeadingProps: { fontWeight: 'semibold '}
  }}

配置：

非脉轮相关配置：

  configs={{
    dateFormat: 'yyyy-MM-dd',
    dayNames: 'abcdefg'.split(''), // length of 7
    monthNames: 'ABCDEFGHIJKL'.split(''), // length of 12
    firstDayOfWeek: 2, // default is 0, the dayNames[0], which is Sunday if you don't specify your own dayNames,
  }}

其他道具：

姓名	单一/范围	类型	默认值	描述
姓名	两个都	细绳	不明确的	元素的 name 属性
使用门户	两个都	布尔值	不明确的	防止父样式剪切或隐藏内容
默认打开	两个都	布尔值	错误的	在开头打开日期面板
选择时关闭	两个都	布尔值	真的	完成选择后关闭日期面板
最短日期	两个都	日期	不明确的	最短日期
最大日期	两个都	日期	不明确的	最大日期
禁用日期	单身的	放	不明确的	仅对于单个日期选择器，使用startOfDay作为比较，例如， disabledDates={new Set([startOfDay(new Date()).getTime()}

对于版本 < [email protected] ：
dayOfMonthBtnProps扩展自ButtonProps并且仅支持selectedBg ，

  dayOfMonthBtnProps: {borderColor: "red.300",selectedBg: "blue.200",_hover: { bg: 'blue.400',}
  },