使用 React 的 Dayjs 语言环境答案

【问题标题】：Dayjs Locale with React使用 React 的 Dayjs 语言环境
【发布时间】：2022-07-14 15:58:14
【问题描述】：

所以我试图在我的 React 应用程序中使用 dayjs 显示德语区域设置但不工作，这是我的代码，我尝试添加 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;

【问题讨论】：

标签： dayjs

【解决方案1】：

您需要先在文件顶部导入语言环境。

import 'dayjs/locale/de'

然后你可以将全局语言环境设置为 de

dayjs.locale(‘de’)

【讨论】：