0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

MaterialUIのDate / Time pickersの入力欄をOutlinedにしたい

Posted at

タイトルそのまま。
やりたいんだけど、全く方法が見つけられなかった。
私はきっと同じことをしようとしてまたハマるので、備忘録的に書いておく。
結論だけ知りたい人は、一番したまでどうぞ。

やりたいこと

image.png
このデモの入力欄が下線になっている。
これを↓のTextFieldのOutlinedと同じようにしたい。
image.png

コードを見てみる

<KeyboardDatePicker
         disableToolbar
         variant="inline"
         format="MM/dd/yyyy"
         margin="normal"
         id="date-picker-inline"
         label="Date picker inline"
         value={selectedDate}
         onChange={handleDateChange}
         KeyboardButtonProps={{
           'aria-label': 'change date',
         }}
/>

となっているので、「KeyboardDatePicker」という部品であの入力欄が作られていることがわかった。
ならば、APIのページを見に行くだけだ!と検索欄にコピペ。

image.png

あれ?!ヒットしない?!

なんでだよ。使ってるじゃないか。
その部品の使い方を教えてくれよ。

やっと見つけた

まぁ、こんな変な苦労をしたのは
私が英語苦手すぎるが故なんだけど。

ずっと、「Material-UI」のドキュメントを漁ってた。
そしてあの部品はどこにいたのか。

「Material-UI pickers」という別のドキュメントにいた。

結果

先ほどのコードにinputVariant="outlined"と付けるだけで終わった

<KeyboardDatePicker
         inputVariant="outlined"
         disableToolbar
         variant="inline"
         format="MM/dd/yyyy"
         margin="normal"
         id="date-picker-inline"
         label="Date picker inline"
         value={selectedDate}
         onChange={handleDateChange}
         KeyboardButtonProps={{
           'aria-label': 'change date',
         }}
/>

完璧。
image.png

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?