React Datepicker で日付の入力(日本語化)

ツイート
2021年08月25日
2021年08月26日

ドキュメント

Hacker0x01/react-datepicker: A simple and reusable datepicker component for React

date-fns/date-fns: ⏳ Modern JavaScript date utility library ⌛️

インストール

bash
yarn add react-datepicker date-fns

TypeScript

bash
yarn add -D @types/react-datepicker

実装

若干TailwindでCSS当ててる。

js
import { useState } from 'react' import DatePicker, { registerLocale } from 'react-datepicker' import ja from 'date-fns/locale/ja' import 'react-datepicker/dist/react-datepicker.css' registerLocale('ja', ja) export default function Index () { const [targetDate, setTargetDate] = useState(new Date()) return ( <DatePicker className="p-1 border border-gray-400 rounded-md cursor-pointer" locale="ja" selected={targetDate} onChange={(date) => setTargetDate(date)} /> ) }

ReactDatepicker