chakra dayzed datepicker

Un selector de fechas de chakra simple basado en Dayzed.

Cada componente individual utiliza la interfaz de usuario de Chakra. Por lo tanto, debería respetar todas las configuraciones de la interfaz de usuario de Chakra sin problemas.

El componente en sí tiene que utilizar alguna biblioteca date .

Recomiendo encarecidamente simplemente copiar y pegar el código fuente de /src para personalizarlo como desee.

Instalar la dependencia

Npm

npm i date-fns dayzed

npm i chakra-dayzed-datepicker

Hilo:

yarn add date-fns dayzed

yarn add chakra-dayzed-datepicker

Uso básico

Soltero

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

  const [fecha, establecerFecha] = useState(nueva Fecha());

    

Rango:

Tenga en cuenta que esta lista tendrá un valor durante el proceso de selección. Su sistema no funcionará si intenta controlar esto directamente como [startDate, endDate] porque intentaremos establecer selectedDates en [intermediateSelection] y la longitud de las selectedDates resultantes es significativa para el selector de fechas.

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

    const [fechas seleccionadas, setFechasSeleccionadas] = useState([nueva Fecha(), nueva Fecha()]);

    

accesoriosConfiguraciones:

dateNavBtnProps se extiende desde ButtonProps de Chakra-UI. Esto le permite anular el comportamiento predeterminado como desee, siempre que sea compatible con Chakra-UI.

 díaDeMesBtnProps = {
  propiedades Btn predeterminadas,
  isInRangeBtnProp,
  accesoriosBtn seleccionados,
  hoyBtnProps}

dayOfMonthBtnProps le permite personalizar el estilo de fecha btn según el estado.
Prioridad de estilo: default < isInRange < seleted < today .

popoverCompProps puede ser útil cuando desea configurar algunos estilos simples como el color del texto globalmente

 popoverCompProps = {
  popoverContentProps,
  popoverBodyProps}

Para resumirlos:

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

Ejemplo:

  propsConfigs={{dateNavBtnProps: { colorScheme: "azul", variante: "esquema"},dayOfMonthBtnProps: { defaultBtnProps: {borderColor: "red.300",_hover: { fondo: 'blue.400',} }, isInRangeBtnProps: {color: "amarillo", }, selectedBtnProps: {fondo: "blue.200",color: "verde", }, todayBtnProps: {fondo: "teal.400", }},inputProps: {tamaño: "sm"},popoverCompProps: { popoverContentProps: {fondo: "gray.700 ",color: "blanco", },},calendarPanelProps: { wrapperProps: {borderColor: 'verde', }, contentProps: {borderWidth: 0, }, headerProps: {padding: '5px', }, dividerProps: {display: "none", },},weekdayLabelProps: { fontWeight: 'normal'},dateHeadingProps: { fontWeight: 'semibold'}
  }}

configuraciones:

Configuraciones no relacionadas con 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,
  }}

otros accesorios:

Nombre	simple/rango	Tipo	Valor predeterminado	Descripción
nombre	ambos	cadena	indefinido	atributo de nombre para el elemento
utilizarPortal	ambos	booleano	indefinido	para evitar que los estilos principales recorten u oculten contenido
defaultIsOpen	ambos	booleano	FALSO	abrir el panel de fecha al principio
cerrarAlSeleccionar	ambos	booleano	verdadero	cerrar el panel de fecha al completar la selección
minFecha	ambos	Fecha	indefinido	fecha minima
fecha máxima	ambos	Fecha	indefinido	fecha máxima
Fechas discapacitadas	soltero	Colocar	indefinido	solo para un selector de fecha único, utiliza startOfDay como comparación, por ejemplo, disabledDates={new Set([startOfDay(new Date()).getTime()}

Para la versión < [email protected] :
dayOfMonthBtnProps se extiende desde ButtonProps y solo tiene soporte selectedBg ,

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