input type=dateの未入力時の「年/月/日」「yyyy/mm/dd」を非表示にする

　input type=dateの値が未入力のときに「年/月/日」「yyyy/mm/dd」と表示されたままになるのが見にくい、未入力のときは空欄のままにしてほしいという要望があり、いろいろ調べたけれど設定で変えることはできないようなので、強引ですがJavaScriptで文字色を変えるという方法で対処しました。

※「年/月/日」「yyyy/mm/dd」等の表記はブラウザに依存するため変更できません。これも属性値で変更出来たら楽なのになあ。

// 初期表示時の文字色変更
$(window).on('load', function ()
    {
        $.each($('input[type=date]'), (index, datebox) =>
            {
                datebox.style.color = (datebox.value) ? 'black' : 'white';
            }
        );
    }
);

$(function ()
    {
        // フォーカス取得時は入力用にいったん色を付ける
        $('input[type=date]').focus(function (event)
            {
                this.style.color = 'black';
            }
        );

        // フォーカス喪失後の文字色変更
        $('input[type=date]').blur(function (event)
            {
                this.style.color = (this.value) ? 'black' : 'white';
            }
        );
    }
);

　一部だけに適応したいときは、セレクタに条件を追加してください。
　色はわかりやすいように black white と書いていますが、画面デザインに合わせてお好きなように。
　テキストボックスの色が複数ある場合は、white を transparent としておけばOKです。