• 作成:

Material-UI PickersのDateTimePickerのrequired属性が効かない問題をreadonlyを抹消して解決する

input要素にrequired属性を付加しておくと,formsubmit時にinputにデータが入力されていないとブラウザが警告してくれます.

The world's most popular React UI framework - Material-UITextFieldにもrequired属性があって同様に動いてくれます.

しかしtype="datetime-local"のブラウザネイティブサポートは限られているので,これはラッパーを使ってクロスブラウザ対応させることになります.

そこでMaterial-UI Pickersを使うのですが,このPickerたち,required属性を受け入れる割には無視します.

inputrequiredについて資料を見てみると,

メモ: 読み取り専用フィールドは値を持てないため、 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が発生しなくなりました.