Dayjs地区与反应

Question

所以我试着用dayjs在我的React中显示德语的语言环境，但不起作用，这是我的代码，我试图添加locale('de')，但这不是工作，所以我不知道下一步该尝试什么。我正在努力学习如何去做，我不知道我是否需要导入一个地区，或者它是从“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;

Answer 1

您需要首先导入文件顶部的区域设置。

import 'dayjs/locale/de'

然后，可以将全局区域设置为de。

dayjs.locale(‘de’)