1

フォームから受け取った日付を、MySQLのdatetime型カラムへINSERTすることを想定しています。
月日が分からない場合は、userに0を入力させたいです。

年月日が分かる場合

2020-05-15

年月のみ分かる場合

2020-05-00

年のみ分かる場合

2020-00-00


上記要件を満たすよう、userに出来るだけわかりやすく入力させるにはどうすれば良いですか?
input type="date" は、あり得ない日付は入力不可ですか?

4
  • この場合、MySQL の datetime カラムでも 日付を 00 とした時に入力可能なのかを考慮する必要がある気がします (どちらも恐らく NG っぽい感じがしますが…)。
    – cubick
    Commented 2020年5月15日 12:37
  • MacのSequel ProとMySQL互換のMariaDB 10.4.11の組み合わせ軽く検証した感じでは、「0000-00-00」「2020-00-00」「2020-05-00」は設定できているようなので、あとはこれが仕様として正しいかの資料が見つかれば、MySQL側は行けそうな気がします。あとは、年月日でフィールドを分けて、空のフィールドは「00」で置き換えて、「0000-00-00」形式の文字列をJavaScriptで作れれば行けそうな気がします。
    – sanadan
    Commented 2020年5月16日 5:13
  • DBMSは無関係で、html/javascriptでの日付入力に関する質問だと私は理解しましたが、どうでしょう…?/ちなみに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."とあります(ので現代のブラウザは空か妥当な日付しか受け付けません)。 Commented 2020年5月16日 16:55
  • 質問主旨は「Webブラウザのフォームで0を含む日付入力を促す場合、(User Interface 的に)どういう方法がありますか?」です。RDBMSについては、最終的な利用目的を書いた方が分かりやすいかなと思ったので書きました。なお、質問文ではdatetime型カラムと書きましたが、時刻は不要なことに気が付いたので、date型カラムへINSERTすることを想定しています。「input type="date"」は、今回の目的では使用不可なのですね。もしかすると「0入力可とするオプション」があるかもしれないと思ったのですが…
    – re9
    Commented 2020年5月16日 22:55

1 件の回答 1

1

ユーザビリティ

UI/ユーザビリティの質問なら、まずはあなた自身がユーザ目線で考える事から始めてください。

  • あなたは「2020-00-00という日付を入力するフォーム」が分かりやすいと感じますか。
  • 「範囲指定する場合は、未入力項目を0で埋めてください」と注意書きがあって、「00」の規則性にすぐに気がついて入力する事が出来ますか

一般には、ユーザにシステムの都合で決めた規則値を意識させるべきではありません。
ユーザの立場ではシステム値を覚える必然性がなく、「人間ならば、誰でも分かる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 さん

1
  • なるほど、「入力欄を日付タイプで分ける」と分かりやすいですね。この発想はなかったです(どうやって0を入力させるかばかり考えていました)。参考になりました。
    – re9
    Commented 2020年5月17日 22:19

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。