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:f},poppsProps: {}, TodayBtnProps: {}},inputProps:f},poppsProps: {Props:Props:Pf}Props:Pf}Props> },calendarPanelProps: {wrapperProps: {}, contentProps: {}, headerProps: {},dividerProps: {},},weekdayLabelProps: {},dateHeadingProps: {}
  }}

例子：

  propsConfigs = {{dateNavBtnProps：{ colorScheme：“藍色”，變體：“輪廓”}，dayOfMonthBtnProps：{defaultBtnProps：{borderColor：“red.300”，_hover：{背景：'blue.400'，} }， isInRangeBtnProps： {color: "yellow", }, selectedBtnProps: {background: "blue.200",color: "green", }, TodayBtnProps: {background: "teal.400", }},inputProps: { size: " sm" },popoverCompProps: { popoverContentProps: {background: "gray.700",color: "white", },},calendarPanelProps: {wrapperProps: {borderColor: 'green', }, contentProps: {bidth: 0, }Width: 0, }Width: 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',}
  },