フォームから受け取った日付を、MySQLのdatetime型カラムへINSERTすることを想定しています。
月日が分からない場合は、userに0を入力させたいです。
年月日が分かる場合
2020-05-15
年月のみ分かる場合
2020-05-00
年のみ分かる場合
2020-00-00
上記要件を満たすよう、userに出来るだけわかりやすく入力させるにはどうすれば良いですか?
input type="date" は、あり得ない日付は入力不可ですか?
UI/ユーザビリティの質問なら、まずはあなた自身がユーザ目線で考える事から始めてください。
一般には、ユーザにシステムの都合で決めた規則値を意識させるべきではありません。
ユーザの立場ではシステム値を覚える必然性がなく、「人間ならば、誰でも分かるUI」であることが重要です。
下記HTMLを用意して、
<fieldset>
<legend>日付タイプ</legend>
<label><input type="radio"" name="date-type" value="YYYY">年</label>
<label><input type="radio" name="date-type" value="YYYY-MM">年月</label>
<label><input type="radio" name="date-type" value="YYYY-MM-DD">年月日</label>
</fieldset>
<fieldset>
<legend>日付範囲</legend>
<label><input type="number" name="year">年</label>
<label><input type="number" name="month">月</label>
<label>日付<input type="date" name="date"></label>
</fieldset>
下記機能をCSS/JavaScriptで実装すれば、見えているフォームを入力するだけですので、誰が見ても分かると思います。
このサンプルでは、<fieldset>
-><label>
-><input>
で親子関係が形成されていますが、input要素同士を兄弟関係にすれば、~
結合子が使える為、JavaScriptが不要となります。
Re: re9 さん
datetime
カラムでも 日付を00
とした時に入力可能なのかを考慮する必要がある気がします (どちらも恐らく NG っぽい感じがしますが…)。input type="date"
は "User agents must not allow the user to set the value to a non-empty string that is not a valid date string."とあります(ので現代のブラウザは空か妥当な日付しか受け付けません)。