Months always starts on sundays

[fernandoeeu-g4]

I'm facing this issue where all months stars on the same weekday, Sunday. Here are some screenshots.

Package versions:

react: 17.0.8
react-tailwindcss-datepicker: 1.4.2
dayjs: 1.11.7

Any clue on what can be causing it?

[gesgocom]

Same problem

[onesine]

Hi @fernandoeeu & @gesgocom 👋

Thanks for using this package and thanks for the comments. Really sorry for the delay. Can you tell us how to reproduce this problem. I just updated the documentation to version 1.4.2 of react-tailwindcss-datepicker, but I don't encounter this problem.

[gesgocom]

I was able to detect the problem. It is when it is used dayjs.locale("es"); It seems when I request it to use a language it fails.

[onesine]

Can you show me all your code on the datepicker @gesgocom.

[gesgocom]

import DatosContext from "@context/datosContext"; import { datosBase } from "@data/datosBase"; import general from "@data/general"; import agendas from "@data/agendas"; import SimpleChildLayout from "@layout/simplechild"; import React, { useEffect, useState } from "react"; import { useContext } from "react"; import { QueryClient, dehydrate, useQuery } from "react-query"; import Datepicker from "react-tailwindcss-datepicker"; import dayjs from "dayjs"; require("dayjs/locale/es"); import { faCalendarDays, faClock, faLocation, faLocationDot, faMessageExclamation, faUser, } from "@fortawesome/pro-regular-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

export default function AgendaGobierno() { const { dominioUrl, urlBackend } = useContext(DatosContext); const { data: entidadActual, isFetched: isDatosCargadosEntidadActual } = useQuery(["General.GetEntidadActual", dominioUrl], () => general.GetEntidadActual(urlBackend) );

dayjs.locale('es');

const [usuarios, setUsuarios] = useState<agendasusuarioDTO[]>([]); const [eventos, setEventos] = useState<agendaeventoDTO[]>([]); const [fecha, setFecha] = useState({ startDate: new Date(), endDate: new Date(), });

const cambioFecha = (newValue: any) => { setFecha(newValue); };

const obtenerDatosByFecha = async (fecha: Date) => { setUsuarios(await agendas.GetUsuariosAgendasByFecha(urlBackend, fecha)); setEventos(await agendas.GetEventosAgendasByFecha(urlBackend, fecha)); };

useEffect(() => { obtenerDatosByFecha(dayjs(fecha.startDate).toDate()).catch(console.error); }, [fecha]);

const eventosUsuario = (usuario: agendasusuarioDTO) => { const datosEventos = eventos.filter((x) => x.idagenda === usuario.id);

return (
  <>
    {datosEventos.map((evento) => {
      return (
        <div className="mb-4">
          <p className="text-2xl font-bold text-sky-700 dark:text-white"><FontAwesomeIcon
                icon={faClock}
                className="mr-1 text-sky-700 dark:text-gray-100"
              />{dayjs(evento.fecha).format("HH:mm")}</p>
          <p className="text-xl ml-5 font-bold">{evento.titulo}</p>
          <p className="text-sm ml-5">{evento.descripcion}</p>
          <p className="ml-5 text-sm"><FontAwesomeIcon
                icon={faLocationDot}
                className="mr-1 text-sky-700 dark:text-gray-100"
              />{evento.lugar}</p>
        </div>
      );
    })}
  </>
);

};

return ( <SimpleChildLayout tituloPagina="Agenda altos cargos" descripcionPagina={Agenda de altos cargos dentro del portal de transparencia del ${entidadActual?.entidad}}

<>

Listado diario de las actividades de los altos cargos del{" "} {entidadActual?.entidad}

{dayjs(fecha.startDate).format("DD.MM.YYYY")}

Seleccione la fecha a consultar

          <Datepicker
            containerClassName=""
            i18n={"es"}
            asSingle={true}
            useRange={false}
            displayFormat={"DD/MM/YYYY"}
            configs={{
              footer: {
                cancel: "Cancelar",
                apply: "Seleccionar",
              },
            }}
            startWeekOn="mon"
            value={fecha}
            onChange={cambioFecha}
          />
        </div>
      </div>
      {usuarios.length === 0 ? (
        <>
          <div className="border-2 rounded-xl p-6 mt-4 mb- bg-sky-100 dark:bg-transparent">
            <p className="align-middle text-xl text-center font-bold">
              <FontAwesomeIcon
                icon={faMessageExclamation}
                className="mr-2 text-sky-700 dark:text-gray-100 h-10 w-10"
              />
              Actualmente, no existen eventos programados en el día
              seleccionado
            </p>
          </div>
        </>
      ) : null}

      <ul role="list" className="divide-y divide-gray-200">
        {usuarios.map((usuario) => (
          <li key={usuario.id} className="flex py-4 ml-5">
            <FontAwesomeIcon
              icon={faUser}
              size="3x"
              className="mr-2 text-sky-700 dark:text-gray-100 h-10 w-10"
            />

            <div className="ml-2">
              <p className="text-lg font-bold uppercase  text-sky-700 dark:text-gray-100">
                {usuario.titular}
              </p>
              <p className="text-base text-gray-700 dark:text-gray-300">
                {usuario.cargo}
              </p>
              <div className="pb-2 mb-5 border-b-2"></div>
              {eventosUsuario(usuario)}
            </div>
          </li>
        ))}
      </ul>
    </div>
  </>
</SimpleChildLayout>

); }

export async function getServerSideProps(context: any) { const [queryClient, dominioUrl, urlBackend] = (await datosBase( context, 20, 2 )) as [QueryClient, string, string];

return { props: { dehydratedState: dehydrate(queryClient as QueryClient), dominioUrl: dominioUrl, urlBackend: urlBackend, }, }; }

[onesine]

Can you put this in a codeandbox. Otherwise, it's the datepicker part I want in its entirety.

[bde-maze]

Up same issue here 👋 Any update on this ?

[Toinouze]

Same issue here. As mentioned by @gesgocom it occurs when globally updating dayjs locale using dayjs.locale('xx')

Workaround : don't set locale globally, set it locally for each dayjs instance : https://day.js.org/docs/en/i18n/instance-locale Not perfect but it fixes the issue.

If it's too much work it probably means you need to better encapsulate your 3rd party modules ;)

[dev-m-work]

It works like a charm