chakra dayzed datepicker

Um simples Chakra Datepicker baseado em Dayzed.

Cada componente individual usa Chakra UI. Portanto, deve respeitar todas as configurações do Chakra UI sem problemas.

O próprio componente precisa usar alguma biblioteca date

É altamente recomendável apenas copiar/colar o código-fonte de /src para personalizar como desejar.

Instale a dependência

Npm

npm i date-fns dayzed

npm i chakra-dayzed-datepicker

Fio:

yarn add date-fns dayzed

yarn add chakra-dayzed-datepicker

Uso básico

Solteiro

  importar {SingleDatepicker} de "chakra-dayzed-datepicker";

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

    

Faixa:

Observe que esta lista terá um valor durante o processo de seleção. Seu sistema não funcionará se você tentar controlar isso diretamente como [startDate, endDate] porque tentaremos definir selectedDates como [intermediateSelection] e o comprimento do selectedDates resultante será significativo para o selecionador de data.

  importar { RangeDatepicker } de "chakra-dayzed-datepicker";

    const [selectedDates, setSelectedDates] = useState([nova Data(), nova Data()]);

    

propsConfigs:

dateNavBtnProps se estende de ButtonProps do Chakra-UI. Isso permite que você substitua o comportamento padrão da maneira que desejar, desde que seja suportado pelo Chakra-UI.

 dayOfMonthBtnProps = {
  padrãoBtnProps,
  isInRangeBtnProp,
  selecionadoBtnProps,
  hojeBtnProps}

dayOfMonthBtnProps permite personalizar o estilo de data btn com base no estado.
Precedência de estilo: default < isInRange < seleted < today .

popoverCompProps pode ser útil quando você deseja configurar alguns estilos simples, como a cor do texto, globalmente

 popoverCompProps = {
  popoverContentProps,
  popoverBodyProps}

Para resumi-los:

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

Exemplo:

  propsConfigs={{dateNavBtnProps: { colorScheme: "blue", variante: "outline"},dayOfMonthBtnProps: { defaultBtnProps: {borderColor: "red.300",_hover: { background: 'blue.400',} }, isInRangeBtnProps: {cor: "amarelo", }, selecionadoBtnProps: {plano de fundo: "blue.200",color: "green", }, todayBtnProps: {background: "teal.400", }},inputProps: { size: "sm"},popoverCompProps: { popoverContentProps: {background: "gray.700 ",color: "branco", },},calendarPanelProps: { wrapperProps: {borderColor: 'verde', }, contentProps: {borderWidth: 0, }, headerProps: {padding: '5px', }, dividerProps: {display: "none", },},weekdayLabelProps: { fontWeight: 'normal'},dateHeadingProps: { fontWeight: 'semibold'}
  }}

configurações:

Configurações não relacionadas ao Chakra:

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

outros adereços:

Nome	único/intervalo	Tipo	Valor padrão	Descrição
nome	ambos	corda	indefinido	atributo de nome para elemento
usarPortal	ambos	booleano	indefinido	para evitar que estilos pai recortem ou ocultem conteúdo
padrãoIsOpen	ambos	booleano	falso	abra o painel de data no início
closeOnSelect	ambos	booleano	verdadeiro	feche o painel de data após a seleção completa
minData	ambos	Data	indefinido	data mínima
datamáx.	ambos	Data	indefinido	data máxima
datas desabilitadas	solteiro	Definir	indefinido	apenas para selecionador de data único, usa startOfDay como comparação, por exemplo, disabledDates={new Set([startOfDay(new Date()).getTime()}

Para versão < [email protected] :
dayOfMonthBtnProps se estende de ButtonProps e tem suporte apenas selectedBg ,

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