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です。