Dayjs Locale with React

Question

So I'm trying to show locale of German in my React app with dayjs but is not working, here is my code, i tried to add locale('de') but that is not doing the job, so i don't know what to try next. I'm trying to learn how to do it, and I don't know if i need to import a locale or it does it take it from 'dayjs'

import React, { Fragment, useContext, useEffect, useState } from 'react';
import dayjs from 'dayjs';
import { getMonth } from '../../utils/calendar/dayjs';
import GlobalContext from '../../context/calendar/GlobalContext';
import styles from '../../styles/Calendar.module.scss';

function SmallCalendar() {
  const [currentMonthIdx, setCurrentMonthIdx] = useState(dayjs().month());
  const [currentMonth, setCurrentMonth] = useState(getMonth());

  useEffect(() => {
    setCurrentMonth(getMonth(currentMonthIdx));
  }, [currentMonthIdx]);

  const { monthIndex, setSmallCalendarMonth, setDaySelected, daySelected } =
    useContext(GlobalContext);

  useEffect(() => {
    setCurrentMonthIdx(monthIndex);
  }, [monthIndex]);


  function getDayClass(day) {
    const format = 'DD-MM-YY';
    const nowDay = dayjs().format(format);
    const currDay = day.format(format);
    const slcDay = daySelected && daySelected.format(format);

    if (nowDay === currDay) return styles.day_active;
    else if (currDay === slcDay) return styles.day_selected;
    else return '';
  }

  return (
    <div className={styles.minicalendar}>
      <header className={styles.calendar_header}>
        <p
          style={{ color: 'var(--color-active)' }}
          className='text-gray-500 font-bold'>
          {dayjs(new Date(dayjs().locale('de').year(), currentMonthIdx)).format(
            'DD MMMM YYYY'
          )}
        </p>
  
      </header>
      <div
        className={`grid grid-cols-7 grid-rows-6 ${styles.minicalendar_body}`}>
        {currentMonth[0].map((day, i) => (
          <span key={i} className='text-sm py-1 text-center'>
            {day.format('dd').charAt(0)}
          </span>
        ))}
        {currentMonth.map((row, i) => (
          <Fragment key={i}>
            {row.map((day, inx) => (
              <button
                key={inx}
                onClick={() => {
                  setSmallCalendarMonth(currentMonthIdx);
                  setDaySelected(day);
                }}
                className={`py-1 w-full ${getDayClass(day)}`}>
                <span className='text-sm'>{day.format('D')}</span>
              </button>
            ))}
          </Fragment>
        ))}
      </div>
    </div>
  );
}

export default SmallCalendar;

Leath

Answer 1

You need to first import the locale at the top of your file.

import 'dayjs/locale/de'

Then you can set the global locale to de

dayjs.locale(‘de’)

Portamento

Answer 2

This is how you can import any plugin into your react code:

import dayjs from 'dayjs';
import <plugin-name> from 'dayjs/plugin/<plugin-name>';

dayjs.extend(<plugin-name>);

---

e.g:

import dayjs from "dayjs";
import isSameOrBefore from "dayjs/plugin/isSameOrBefore";

dayjs.extend(isSameOrBefore);

You can see the list of plugins here.

---

PS: This is how I set mine in a NextJs project:

dayjs.helper.ts:

import dayjs from 'dayjs'

// plugins
import utc from 'dayjs/plugin/utc'

export const dayjsSetup = () => {
  dayjs.extend(utc)
  // extend from other plugins here
}

And I'll call this in the app.tsx:

import { dayjsSetup } from '@/utility/timeJs.helper'

export default function App(props: MyAppProps) {
  dayjsSetup()
  .
  .
  .
  // rest of the code
}

Ithaca