date-fnsを使用!

Moment.jsは開発停止を発表した.
Moment.jsライブラリのWebサイトにアクセスするには、次の理由で他のライブラリを使用することをお勧めします.

では、新しい機能は追加されません.

Motion APIは変更されません.

ツリーのジッタやバンドルサイズの問題は解決しません.

に重大な変更はありません(バージョン3はありません).

、特に既知の文書では、エラーや動作の問題を修正することはできません.

代替案としてのライブラリは以下の通りです.

Luxon

Day.js

Date-fns

js-Joda

今日はその中でdate-fnsを使います!🤗

date-fnsを使用してカレンダーを作成する📅

2021年7月にカレンダーを作りましょう!startOfMonth、startOfWeek、endOfMonth、endOfWeekを使用して、今月の開始日と終了日を知ることができます.

 const selectedDate = new Date();

    const startDate = startOfWeek(startOfMonth(selectedDate))
    console.log(startDate)
    const endDate = endOfWeek(endOfMonth(selectedDate))
    console.log(endDate)

該当する月の恒星日付の関数を取得します。

dateを週の最終日+1日に設定し、来週に移動できます.

function takeWeek(start = new Date()) {
    let date = startOfWeek(startOfDay(start))

    return function () {
        const week = [...Array(7)].map((_, index) => addDays(date, index))
        date = addDays(week[6], 1)
        return week
    }
}

該当する月のすべての週シナリオを保存

これまで保存されていたmonth配列の最後の日付がその月のendDateより小さい場合はweek配列をインポートして保存します.

export function takeMonth(start = new Date()) {
    let month = []
    let date = start

    return function () {
        const weekGen = takeWeek(startOfMonth(date))
        const endDate = startOfDay(endOfMonth(date))
        month.push(weekGen())

        while (lastDayOfRange(month) < endDate) {
            month.push(weekGen())
        }

        const range = month
        month = [];
        date = addDays(lastDayOfRange(range), 1)

        return range
    }
}

function lastDayOfRange(range) {
    return range[range.length - 1][6]
}

曜日リスト出力

function WeekNames() {
    const weeks =['일', '월', '화', '수', '목', '금', '토']
    return (
        <div className="grid grid-cols-7 text-xs text-gray-500">
            {weeks.map((dayName)=>(
                <div className="h-8 flex items-center justify-center border-r" key={dayName}>{dayName}</div>
            ))}
        </div>
    );
}

出力日リスト

import {addMonths, format, subMonths} from 'date-fns'

function Calendar() {
    const [currentDate, setCurrentDate] = useState(new Date());
    const [selectedDate, setSelectedDate] = useState(new Date())
    const data = takeMonth(currentDate)()

  
    const nextMonth = () => {
        setCurrentDate(addMonths(currentDate, 1));
    };
    const prevMonth = () => {
        setCurrentDate(subMonths(currentDate, 1));
    };

    return (
        <div className="box-border m-8 w-2/3">
            <div className="flex items-center">
                <h1 className="text-xl font-bold">{format(currentDate, 'MMMM yyyy')}</h1>
                <MdKeyboardArrowLeft onClick={prevMonth} size={20}/>
                <MdKeyboardArrowRight onClick={nextMonth} size={20}/>
            </div>
                <div className="border">
                    <WeekNames/>
                    {data.map((week, index) => <div className="grid grid-cols-7" key={index}>
                        {week.map((day) =>
                            <div onClick={() => setSelectedDate(day)}
                                 className={`h-28 flex flex-col items-center border-b border-r`}
                                 key={day}>
                                <div className={`flex text-xs font-bold ${dayColor(day, currentDate)} h-6 w-6 justify-center items-center cursor-pointer`}> {format(day, 'dd')}</div>
                            </div>)}
                    </div>)}
                </div>
        </div>
    );
}

formatを使用して、希望するフォーマットで日付を設定できます.
リファレンス映像