input type="date"でvalueを変えずデータを変数に入れる

Question

1はベースとなるコードです
valueがボタンになることはありません
変数sには日付が入ります

2はdateをdisplay:noneをかけてclick()で実現しようとしましたが、
カレンダー自体も非表示になりました

3buttonを作ってtypeを変更してまた戻すというようなことをやっていますが、
ボタンという文字に変化を与えたくありません

どうしたらずっとボタンという表示のままデータを変数に入れられますでしょうか

Windows Firefox

1
<script>
window.onload=function(){
document.getElementById("d").addEventListener('click', function() {
s=this.value;
this.value="ボタン";
});
}
</script>
<input type="date" id="d" value="ボタン">

2
<script>
window.onload=function(){
document.getElementById("d1").addEventListener('click', function() {
document.getElementById("d2").click();
document.getElementById("d2").addEventListener('change', function() {
s=document.getElementById("d2").value;
alert(s);
});
});
}
</script>
<input type="button" id="d1" value="ボタン">
<input type="date" id="d2" style="display:none">

3
<script>
window.onload=function(){
document.getElementById("d").addEventListener('click', function() {
document.getElementById("d").type="date";
document.getElementById("d").addEventListener('change', function() {
document.getElementById("d").type="button";
document.getElementById("d").value="ボタン";
s=document.getElementById("d").value;
alert(s);
});
});
}
</script>
<input type="button" id="d" value="ボタン">

Answer 1

<input type=date> のカレンダーピッカーのUIだけ使いたいという質問だと思いますが、現状ではムリかと思います。

showPicker()の提案をChromeでプロトタイプしているらしいです。これがすべてのブラウザで実装されれば可能になると思います。

Answer 2

ググりながら、無理やりにできました。
-webkit-datetime-editを使ってるので、ブラウザーによって思うどうりには動かないと思いますが、その点を注意してください。
jsfiddle：https://jsfiddle.net/skys215/n8prsf9h/14/