chakra dayzed datepicker
1.0.0
Jede einzelne Komponente verwendet die Chakra-Benutzeroberfläche. Daher sollten alle Chakra-UI-Konfigurationen problemlos berücksichtigt werden.
Die Komponente selbst muss eine date verwenden
Wir empfehlen dringend, einfach den Quellcode aus /src zu kopieren/einzufügen, um ihn nach Ihren Wünschen anzupassen.
Npm
npm i date-fns dayzed
npm i chakra-dayzed-datepicker
Garn:
yarn add date-fns dayzed
yarn add chakra-dayzed-datepicker
import { SingleDatepicker } from „chakra-dayzed-datepicker“;
const [date, setDate] = useState(new Date());
Beachten Sie, dass diese Liste während des Auswahlprozesses einen Wert hat. Ihr System funktioniert nicht, wenn Sie versuchen, dies direkt als [startDate, endDate] zu steuern, da wir versuchen, selectedDates auf [intermediateSelection] zu setzen und die Länge der resultierenden selectedDates für die Datumsauswahl von Bedeutung ist.
import { RangeDatepicker } from „chakra-dayzed-datepicker“;
const [selectedDates, setSelectedDates] = useState([new Date(), new Date()]);
dateNavBtnProps erweitert sich um ButtonProps von Chakra-UI. Dies ermöglicht Ihnen, das Standardverhalten nach Ihren Wünschen zu überschreiben, solange es von Chakra-UI unterstützt wird.
dayOfMonthBtnProps = {
defaultBtnProps,
isInRangeBtnProp,
selectedBtnProps,
todayBtnProps} dayOfMonthBtnProps können Sie den Datums-BTN-Stil basierend auf dem Status anpassen.
Stilpriorität: default < isInRange < seleted < today .
popoverCompProps kann nützlich sein, wenn Sie einige einfache Stile wie die Textfarbe global einrichten möchten
popoverCompProps = {
popoverContentProps,
popoverBodyProps}Um sie zusammenzufassen:
propsConfigs={{dateNavBtnProps: {},dayOfMonthBtnProps: { defaultBtnProps: {}, isInRangeBtnProps: {}, selectedBtnProps: {}, todayBtnProps: {}},inputProps: {},popoverCompProps: { popoverContentProps: {}, popoverBodyProps: {}},calendarPanelProps: { WrapperProps: {}, ContentProps: {}, HeaderProps: {}, DividerProps: {},},WeekdayLabelProps: {},DateHeadingProps: {}
}}
Beispiel:
propsConfigs={{dateNavBtnProps: { colorScheme: "blue", variant: "outline"},dayOfMonthBtnProps: { defaultBtnProps: {borderColor: "red.300",_hover: { background: 'blue.400',} }, isInRangeBtnProps: {color: "gelb", }, 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: {borderWidth: 0, }, headerProps: {padding: '5px', }, DividerProps: {display: "none", },},weekdayLabelProps: { FontWeight: 'normal'},dateHeadingProps: { FontWeight: 'semibold'}
}}Nicht Chakra-bezogene Konfigurationen:
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 | Einzel-/Bereich | Typ | Standardwert | Beschreibung |
|---|---|---|---|---|
| Name | beide | Zeichenfolge | undefiniert | Namensattribut für |
| usePortal | beide | Boolescher Wert | undefiniert | um zu verhindern, dass übergeordnete Stile Inhalte beschneiden oder verbergen |
| defaultIsOpen | beide | Boolescher Wert | FALSCH | Öffnen Sie am Anfang das Datumsfenster |
| closeOnSelect | beide | Boolescher Wert | WAHR | Schließen Sie das Datumsfenster, sobald die Auswahl abgeschlossen ist |
| Mindestdatum | beide | Datum | undefiniert | Mindesttermin |
| maxDate | beide | Datum | undefiniert | maximales Datum |
| deaktivierte Termine | einzel | Satz | undefiniert | Nur für einzelne Datumsauswahl, verwendet startOfDay als Vergleich, z. B. disabledDates={new Set([startOfDay(new Date()).getTime()} |
Für Version < [email protected] :
dayOfMonthBtnProps ist eine Erweiterung von ButtonProps und hat nur selectedBg Unterstützung.
dayOfMonthBtnProps: {borderColor: "red.300",selectedBg: "blue.200",_hover: { bg: 'blue.400',}
}, 
