Hacker0x01/react-datepicker: A simple and reusable datepicker component for React
date-fns/date-fns: ⏳ Modern JavaScript date utility library ⌛️
bashyarn add react-datepicker date-fns
TypeScript
bashyarn add -D @types/react-datepicker
若干TailwindでCSS当ててる。
jsimport { 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)} /> ) }