Q&A
日付を選択するdateをjsで擬似クリックできる方法を探しています
デザイン面でinputを使用したくないのと、iOSで操作したときに標準の日付選択機能が使われるようにしたく上記の方法を模索しています
例としては下記のような形で<div>要素をクリックしたときや<button>などをクリックしたときにカレンダーが開くようなことは可能でしょうか？<input type="date" />はcssで見えない形です
thml
1<div> 2 <button></button> 3</div> 4<input type="date" />
datepickerを使う方法などもありますがiOSなどで標準の日付選択機能を使用したく、できればinput dateを使用した方法を知りたいです。もしくはべつの方法でiOSの日付選択機能を使用できる方法があれば教えていただきたいです。よろしくお願いします。
回答2件
0
非表示の仕方にもよりますが、場合によっては値を遅れない手法もあるので、そのあたりは試してみてください。
（下記はiOSやAndroidでテストはしていません）
HTML
1<div> 2 <label for="a">あ</label> 3</div> 4<input id="a" type="date" /> 5```**動くサンプル：**[https://jsfiddle.net/qm6jzg2s/](https://jsfiddle.net/qm6jzg2s/)
投稿2019/11/07 06:42
総合スコア69583
0
こんにちは
以下でどうでしょう？
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で表示させた画面キャプチャが以下です。
初期表示
「日付選択を表示」ボタンをタップ
補足
下記のスタイル
css
1#date-input { 2 width: 0; 3 padding: 0; 4 border: none; 5 -webkit-appearance: none; 6}
に含まれる４行はおそらくどれも必要と思われますが、もしかすると不要なものもあるかもしれません。
投稿2019/11/07 14:12
総合スコア9058
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。