test-crud/components/forms/AppDateRange.jsx

es una prueba acerca de como publicar un package name

import { useEffect } from 'react'
import dayjs from 'dayjs'
import esLocale from 'dayjs/locale/es'
import Calendar from '@mui/icons-material/Event'
import { AdapterDayjs } from '@mui/x-date-pickers-pro/AdapterDayjs'
import { DateRangePicker, LocalizationProvider } from '@mui/x-date-pickers-pro'
import { useFormikContext } from 'formik'

function AppDateRange({
  name,
  labelDesde = 'Desde',
  labelHasta = 'Hasta',
  nameDesde = 'Desde',
  nameHasta = 'Hasta',
  textFieldProps = { InputProps: { endAdornment: <Calendar /> } },
  fieldSeparator = { children: '' },
  desde,
  hasta,
  ...rest
}) {
  const { setFieldValue, setFieldTouched, errors, touched, values } =
    useFormikContext()

  useEffect(() => {
    if (!values[nameDesde] && !values[nameHasta]) {
      setFieldValue(nameDesde, new Date())
      setFieldValue(nameHasta, new Date())
    }
  }, [])

  const handleDateSelection = (date) => {
    if (date[0]) setFieldValue(nameDesde, date[0])
    if (date[1]) setFieldValue(nameHasta, date[1])
  }

  useEffect(() => {
    if (desde) setFieldValue(nameDesde, desde)
    if (hasta) setFieldValue(nameHasta, hasta)
  }, [desde, hasta])

  return (
    <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale={esLocale}>
      <DateRangePicker
        name={name}
        localeText={{ start: labelDesde, end: labelHasta }}
        value={[dayjs(values[nameDesde]), dayjs(values[nameHasta])]}
        onChange={(date) => handleDateSelection(date)}
        format="DD/MM/YYYY"
        slotProps={{
          textField: textFieldProps,
          fieldSeparator: fieldSeparator,
        }}
        {...rest}
      />
    </LocalizationProvider>
  )
}

export default AppDateRange