Material-UI PickersのDateTimePickerのrequired属性が効かない問題をreadonlyを抹消して解決する
input
要素にrequired
属性を付加しておくと,
form
のsubmit
時にinput
にデータが入力されていないとブラウザが警告してくれます.
The world's most popular React UI framework - Material-UI
のTextField
にもrequired
属性があって同様に動いてくれます.
しかしtype="datetime-local"
のブラウザネイティブサポートは限られているので,
これはラッパーを使ってクロスブラウザ対応させることになります.
そこでMaterial-UI Pickersを使うのですが,
このPickerたち,
required
属性を受け入れる割には無視します.
input
のrequired
について資料を見てみると,
メモ: 読み取り専用フィールドは値を持てないため、 required は readonly 属性が同時に指定されている入力欄には効果がありません。
<input>: 入力欄 (フォーム入力) 要素 - HTML: HyperText Markup Language | MDN
とあります.
確かに生のinput
を見てみるとreadonly
がついてますね.
inputProps
で無効化しましょう.
import * as DateFns from "date-fns";
import * as MC from "@material-ui/core";
import * as MP from "@material-ui/pickers";
import DateFnsUtils from "@date-io/date-fns";
import React, { FormEvent, ReactElement, useState } from "react";
import localeJa from "date-fns/locale/ja";
<MP.MuiPickersUtilsProvider utils={DateFnsUtils} locale={localeJa}>
<MC.FormGroup row>
<MP.DateTimePicker
required
InputProps={{ readOnly: false }}
clearable
label="日時"
value={date}
onChange={setDate}
/>
</MC.FormGroup>
</MP.MuiPickersUtilsProvider>
これでデータが入力されていない時エラーメッセージによって警告されてsubmit
が発生しなくなりました.