Material-UIのTextFieldをtype="date"にした際のdefaultValueに指定する日付のフォーマットについて備忘録

2021/01/01 14:50
<p>material-uiの<code>TextFiled</code>という<a class="keyword" href="http://d.hatena.ne.jp/keyword/API">API</a>の中で、<code>type="date"</code>のようにタイプを指定することでDate pickerのように使用することができる。</p> <p><a href="https://material-ui.com/components/pickers/#native-pickers">Date picker, Time picker React components - Material-UI</a></p> <p>その際、デフォルトの日付を<code>defaultValue</code>というオプションで設定できるが、この部分で少し詰まったので備忘録として残す。</p> <h4>ダメだった例</h4> <pre class="code lang-javascript" data-lang="javascript" data-unlink> <span class="synComment">// 年、月、日の区切りがスラッシュになっているとdefaultValueとして認識されない</span> <span class="synStatement">const</span> today = dayjs().format(<span class="synConstant">'YYYY/MM/DD'</span>) &lt;TextField label=<span class="synConstant">&quot;testDay&quot;</span> type=<span class="synConstant">&quot;date&quot;</span> defaultValue=<span class="synIdentifier">{</span>today<span class="synIdentifier">}</span> margin=<span class="synConstant">&quot;normal&quot;</span> /&gt; </pre> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/f/fujjima/20210101/20210101144435.png" alt="f:id:fujjima:20210101144435p:plain" title="" class="hatena-fotolife" itemprop="image"></span></p> <h4>良かった例</h4> <pre class="code lang-javascript" data-lang="javascript" data-unlink> <span class="synComment">// 年、月、日の区切りがハイフンだときちんとdefaultValueとして指定できる</span> <span class="synStatement">const</span> today = dayjs().format(<span class="synConstant">'YYYY-MM-DD'</span>) &lt;TextField label=<span class="synConstant">&quot;testDay&quot;</span> type=<span class="synConstant">&quot;date&quot;</span> defaultValue=<span class="synIdentifier">{</span>today<span class="synIdentifier">}</span> margin=<span class="synConstant">&quot;normal&quot;</span> /&gt; </pre> <p><span itemscope itemtype="http://schema.org/Photograph"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/f/fujjima/20210101/20210101144333.png" alt="f:id:fujjima:20210101144333p:plain" title="" class="hatena-fotolife" itemprop="image"></span></p> <p>詳細は調査中だが、同じようにdatapickerとして使用できる<code>KeyboardDatePicker</code>ではformatに<code>format="MM/dd/yyyy"</code>のように指定してもいける感じなので、どうしてこのような仕様にしているかはよく分からない。 しかも表示される時には<code>YYYY/MM/DD</code>形式だし。スラッシュどこに行った。</p> <p><a href="https://material-ui.com/components/pickers/#material-ui-pickers">https://material-ui.com/components/pickers/#material-ui-pickers</a></p>