カレンダー(type="date")の中身をデフォルトで非表示にしたい

前提・実現したいこと

inputタグでカレンダーを動かしているのですが、
入力欄にはデフォルトで「年/月/日」と表示されております。

この「年/月/日」を非表示にし、クリックした時に通常と同じように年月日を選択できるようにしたいです。

該当のソースコード

html
1<span>
2  <input name="希望日時" type="date">
3  <label>
4   <span>希望日時</span>
5  </label>
6</span>

試したこと

https://code.i-harness.com/ja/q/13613b2
上記サイトの内容を試しましたが、実現できませんでした。

行動規範の内容に同意します

回答1件

Chrome だとしても状況は2017年時点と変わっていないと思うので、作りこむ必要があります。

CSS
1input[type="date"] {
2  position: relative;
3}
4
5input[type="date"]::after {
6  content: attr(data-date);
7  display: inline-block;
8  position: absolute;
9  top: 3px;
10  left: 3px;
11}
12
13input[type="date"]::-webkit-datetime-edit {
14  visibility: hidden;
15}

JavaScript
1document.querySelector('input[type="date"]').addEventListener('change', event => {
2  const target = event.target;
3  target.setAttribute('data-date', target.value);
4}, false);