chakra dayzed datepicker
1.0.0
個々のコンポーネントはすべて Chakra UI を使用しています。したがって、すべての Chakra UI Config は問題なく尊重されるはずです。
コンポーネント自体は何らかのdateライブラリを使用する必要があります
/srcからソース コードをコピー/ペーストして、必要に応じてカスタマイズすることを強くお勧めします。
Npm
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());
選択プロセス中、このリストには 1 つの値が含まれることに注意してください。これを[startDate, endDate]として直接制御しようとすると、システムは機能しません。これは、 selectedDates [intermediateSelection]に設定しようとし、結果として得られるselectedDatesの長さが日付ピッカーにとって意味があるためです。
「chakra-dayzed-datepicker」から { RangeDatepicker } をインポートします。
const [selectedDates, setSelectedDates] = useState([new Date(), new Date()]);
dateNavBtnProps Chakra-UI のButtonPropsから拡張されます。これにより、Chakra-UI でサポートされている限り、デフォルトの動作を任意にオーバーライドできます。
dayOfMonthBtnProps = {
デフォルトBtnProps、
isInRangeBtnProp、
selectedBtnProps、
今日BtnProps} dayOfMonthBtnProps使用すると、状態に基づいて日付ボタンのスタイルをカスタマイズできます。
スタイルの優先順位: default < isInRange < seleted < today 。
popoverCompProps 、テキストの色などの単純なスタイルをグローバルに設定したい場合に便利かもしれません
ポップオーバーCompProps = {
ポップオーバーコンテンツプロップ、
ポップオーバーボディプロップ}それらを要約すると、次のようになります。
propsConfigs={{dateNavBtnProps: {},dayOfMonthBtnProps: {defaultBtnProps: {}, isInRangeBtnProps: {}, selectedBtnProps: {}, todayBtnProps: {}},inputProps: {},popoverCompProps: { PopoverContentProps: {}, PopoverBodyProps: {}}、calendarPanelProps: {wrapperProps: {}、contentProps: {}、headerProps: {}、dividerProps: {},}、weekdayLabelProps: {}、dateHeadingProps: {}
}}
例：
propsConfigs={{dateNavBtnProps: { colorScheme: "blue"、variant: "outline"},dayOfMonthBtnProps: {defaultBtnProps: {borderColor: "red.300",_hover: { background: 'blue.400',} }, isInRangeBtnProps: {color: " yellow", }、selectedBtnProps: {background: "blue.200",color: "green", }, todayBtnProps: {background: "teal.400", }},inputProps: { size: "sm"},popoverCompProps: { PopoverContentProps: {background: " grey.700",color: "white", },},calendarPanelProps: {wrapperProps: {borderColor: 'green', }, contentProps: {borderWidth: 0, }, headerProps: {padding: '5px', },dividerProps: {display: "none", },},weekdayLabelProps: { fontWeight: 'normal'},dateHeadingProps : { fontWeight: 'セミボールド'}
}}チャクラ関連以外の構成:
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,
}}| 名前 | シングル/レンジ | タイプ | デフォルト値 | 説明 |
|---|---|---|---|---|
| 名前 | 両方 | 弦 | 未定義 | |
| usePortal | 両方 | ブール値 | 未定義 | 親スタイルがコンテンツを切り取ったり非表示にしたりしないようにするため |
| デフォルトは開いています | 両方 | ブール値 | 間違い | 最初に日付パネルを開きます |
| closeOnSelect | 両方 | ブール値 | 真実 | 選択が完了したら日付パネルを閉じます |
| 分日 | 両方 | 日付 | 未定義 | 最低日付 |
| 最大日付 | 両方 | 日付 | 未定義 | 最大日付 |
| 無効日 | シングル | セット | 未定義 | 単一の日付ピッカーの場合のみ、比較としてstartOfDay使用します。たとえば、 disabledDates={new Set([startOfDay(new Date()).getTime()} |
バージョン < [email protected]の場合:
dayOfMonthBtnPropsはButtonPropsから拡張されており、 selectedBgのみをサポートしています。
dayOfMonthBtnProps: {borderColor: "red.300",selectedBg: "blue.200",_hover: { bg: 'blue.400',}
}、 
