こんにちは
以下でどうでしょう?
html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" id="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
6 <title>Q221717</title>
7 <script>
8 document.addEventListener('DOMContentLoaded', function() {
9 var selectedDate = document.getElementById('selected-date');
10 var dateInput = document.getElementById('date-input');
11 var btn = document.getElementById('btn');
12
13 btn.addEventListener('click', function() {
14 dateInput.focus();
15 });
16
17 dateInput.addEventListener('change', function(e) {
18 selectedDate.textContent = e.target.value;
19 });
20
21 });
22 </script>
23 <style>
24 #date-input {
25 width: 0;
26 padding: 0;
27 border: none;
28 -webkit-appearance: none;
29 }
30 #btn { font-size: 16pt; }
31 p { padding: 10px; }
32 </style>
33</head>
34<body>
35<input id="date-input" type="date" />
36<button id="btn">日付選択を表示</button>
37<br />
38<p>
39選択された日付: <span id="selected-date"></span>
40</p>
41</body>
42</html>
上記の HTMLと同一のものを以下の URL にて表示できます。
上記のURLを、当方の手元にある iPhone8 の Safariで表示させた画面キャプチャが以下です。
初期表示
![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/c75cd0a1eace882492ae5d20c6f72e8c.png)
「日付選択を表示」ボタンをタップ
![イメージ説明](https://teratail-v2.storage.googleapis.com/uploads/contributed_images/51f81972eb5b14e754300f846ae93577.png)
補足
下記のスタイル
css
1#date-input {
2 width: 0;
3 padding: 0;
4 border: none;
5 -webkit-appearance: none;
6}
に含まれる4行はおそらくどれも必要と思われますが、もしかすると不要なものもあるかもしれません。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。