chakra dayzed datepicker

Un simple sélecteur de date de chakra basé sur Dayzed.

Chaque composant individuel utilise Chakra UI. Il devrait donc respecter toutes les configurations de Chakra UI sans problème.

Le composant lui-même doit utiliser une bibliothèque date

Je recommande fortement de simplement copier/coller le code source de /src pour le personnaliser comme vous le souhaitez.

Installer la dépendance

Npm

npm i date-fns dayzed

npm i chakra-dayzed-datepicker

Fil:

yarn add date-fns dayzed

yarn add chakra-dayzed-datepicker

Utilisation de base

Célibataire

  importer { SingleDatepicker } depuis "chakra-dayzed-datepicker" ;

  const [date, setDate] = useState(new Date());

    

Gamme:

Notez que cette liste aura une valeur lors du processus de sélection. Votre système ne fonctionnera pas si vous essayez de contrôler cela directement en tant que [startDate, endDate] car nous essaierons de définir selectedDates sur [intermediateSelection] et la longueur des selectedDates résultantes est significative pour le sélecteur de date.

  importer { RangeDatepicker } depuis "chakra-dayzed-datepicker" ;

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

    

propsConfigs :

dateNavBtnProps s'étend de ButtonProps de Chakra-UI. Cela vous permet de remplacer le comportement par défaut comme vous le souhaitez, à condition qu'il soit pris en charge par Chakra-UI.

 jourDeMoisBtnProps = {
  par défautBtnProps,
  isInRangeBtnProp,
  sélectionnéBtnProps,
  aujourd'huiBtnProps}

dayOfMonthBtnProps vous permet de personnaliser le style de date btn en fonction de l'état.
Priorité du style : default < isInRange < seleted < today .

popoverCompProps peut être utile lorsque vous souhaitez configurer globalement des styles simples comme la couleur du texte.

 popoverCompProps = {
  popoverContentProps,
  popoverBodyProps}

Pour les résumer :

  propsConfigs={{dateNavBtnProps : {},dayOfMonthBtnProps : { defaultBtnProps : {}, isInRangeBtnProps : {}, selectedBtnProps : {}, aujourd'huiBtnProps : {}},inputProps : {},popoverCompProps : { popoverContentProps : {}, popoverBodyProps : {}},calendarPanelProps : { wrapperProps : {}, contentProps : {}, headerProps : {}, DividerProps : {},},weekdayLabelProps : {}, dateHeadingProps : {}
  }}

Exemple:

  propsConfigs={{dateNavBtnProps : { colorScheme : "blue", variante : "outline"},dayOfMonthBtnProps : { defaultBtnProps : {borderColor : "red.300",_hover : { background : 'blue.400',} }, isInRangeBtnProps : {couleur : "jaune", }, selectedBtnProps : {arrière-plan : "bleu.200", couleur : "vert", }, aujourd'huiBtnProps : {arrière-plan : "teal.400", }},inputProps : { taille : "sm"}, popoverCompProps : { popoverContentProps : {arrière-plan : "gray.700 ",color : "blanc", },},calendarPanelProps : { wrapperProps : {borderColor : 'vert', }, contentProps : {borderWidth : 0, }, headerProps : {padding : '5px', }, DividerProps : {display : "none", },},weekdayLabelProps : { fontWeight : 'normal'}, dateHeadingProps : { fontWeight : 'semibold'}
  }}

configurations :

Configurations non liées aux chakras :

  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,
  }}

autres accessoires :

Nom	simple/gamme	Taper	Valeur par défaut	Description
nom	les deux	chaîne	indéfini	attribut de nom pour l'élément
utiliser le portail	les deux	booléen	indéfini	pour empêcher les styles parents de couper ou de masquer le contenu
par défautEstOuvert	les deux	booléen	FAUX	ouvrir le panneau de date au début
fermerSurSélectionner	les deux	booléen	vrai	fermez le panneau de date une fois la sélection complète
Date min	les deux	Date	indéfini	date minimale
datemax	les deux	Date	indéfini	date maximale
Dates désactivées	célibataire	Ensemble	indéfini	pour un seul sélecteur de date uniquement, utilise startOfDay comme comparaison, par exemple, disabledDates={new Set([startOfDay(new Date()).getTime()}

Pour la version < [email protected] :
dayOfMonthBtnProps s'étend de ButtonProps et ne prend en charge que selectedBg ,

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