フォームの中に日付を指定する項目がある場合は、input[type=”date”]を使うことが多いと思います。

<input type="date" name="date">

input[type=”date”]では、デフォルトで「年/月/日」や「yyyy/mm/dd」というプレースホルダーっぽいものが表示されます。
※厳密にはブラウザのネイティブUIによる制御でプレースホルダーではありません。

Chromeでは「年/月/日」です。

FirefoxやEdgeでは「yyyy/mm/dd」ですね。

未入力時は、この「年/月/日」や「yyyy/mm/dd」を表示させたくない、というケースもあるかと思います。そんな時のために、未入力時はinput[type=”date”]の「年/月/日」や「yyyy/mm/dd」を非表示にする方法をご紹介いたします。

非表示といっても、文字色を変えて見えなくする手法です。

input[type=”date”]の未入力時に「年/月/日」を非表示にする方法

未入力時に「年/月/日」や「yyyy/mm/dd」を非表示にするには、JavaScriptで制御します。以下のようなJavaScriptを追加することで、未入力時には何も表示されなくなります。

<script>
  document.addEventListener('DOMContentLoaded', function () {
    const dateInputs = document.querySelectorAll('input[type=date]');

    dateInputs.forEach((input) => {
      // 初期表示時の文字色変更
      input.style.color = input.value ? '#000' : 'transparent';

      // フォーカス時は色を付ける
      input.addEventListener('focus', function () {
        this.style.color = '#000';
      });

      // フォーカスが外れたら文字色変更
      input.addEventListener('blur', function () {
        this.style.color = this.value ? '#000' : 'transparent';
      });
    });
  });
</script>

「#000」のところで文字色を指定してください。

未入力時は文字色を透明にし、フォーカス時に文字色を付けて、フォーカスが外れた時にンされているかどうかを判定して文字色を付け直します。

注意点

この手法は1点だけ問題があって、Firefoxではカレンダーのアイコンまで消えてしまいます。

ChromeやEdgeではカレンダーのアイコンは残ります。

Firefoxもちゃんと対応する場合は、他の方法を考える必要があります。

あとがき

CSSで簡単に消せたらいいんですけどね。どうもCSSだけで制御するのは難しいみたいです。

input[type=”date”]のネイティブUIによる表記を見えなくしたい場合は、上述した方法を参考にしてみてください。

もし、もっとスマートなやり方があったら、コメントで教えてくださいm(__)m