React Datepicker実装パターン

html5標準Datepickerを使う

inputタグに type="datetime-local" を指定すると利用できます

import React, { useState } from "react";

const DatePicker = () => {
    const [selected, setSelected] = useState("");


    return (
        <div className="form-check">
            <input type="datetime-local" value={selected}
            onChange={event => setSelected(event.target.value)}></input>
            
            <div>{selected.replace("T", " ")}が選択されました！</div>
        </div>
    )
}
export default DatePicker;

Chromeだとカレンダーと時間選択ポップアップが表示されます

Safariだと時間はキーボード入力する必要があります

react-datepickerを使う

react-datepickerスタート手順に沿って必要なライブラリをインポートして利用します

import React, { useState } from "react";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css"

const DatePickerComponent = () => {
    const [selectedDate, setSelectedDate] = useState<Date>();


    return (
        <DatePicker 
            dateFormat="yyyy/MM/dd HH:mm"
            locale="ja"
            selected={selectedDate} 
            onChange={date => setSelectedDate(date!)}
            showTimeSelect
            timeIntervals={30}/>
    )
}
export default DatePickerComponent;

react-datepickerライブラリのcssが適用されるためブラウザ間でのレイアウト差異がなくなります

Chrome表示

Safari表示

react-datepickerの注意点

dateFormatに時間のフォーマットまで指定する

timeFormat 属性に値を指定しても入力内容に反映されません。。
dateFormat 属性に yyyy/MM/dd HH:mm まで指定する必要があります

        <DatePicker 
            dateFormat="yyyy/MM/dd"
            locale="ja"
            selected={selectedDate} 
            onChange={date => setSelectedDate(date!)}
            showTimeSelect
            timeIntervals={30}
            timeFormat="HH:mm"/>

showTimeSelect属性を記述しないと時間が変更できない

dateFormat="yyyy/MM/dd HH:mm" とすればキーボード入力で時間が変更できそうに見えますが、、

キーボードから時間を変更してもフォーカスを外すと元の時間に戻ってしまいます