javascript - アイコンのクリックで HTML5 日付ピッカーを開く

Question

HTML5 日付ピッカーがあります。
日付ピッカーのテキスト ボックスをクリックすると開きます。

藤堂：

• イベントをアイコンに変更する必要がありますが、これを実現する方法がわかりません。
  カレンダー アイコンをクリックしたときに日付ピッカーを開く必要があります。

私のdatepickerのHTMLコードは次のとおりです。

<img src="date.png" alt="Date Picker" id="datepickericon" />
<input name="calendarselect{ContactID}" class="timeselect" type="date" id="calendar">
<script>
document.getElementById("datepickericon").onclick = function(e){
console.log('inside click');
    document.getElementById("calendar").style.visibility="visible";
    // document.getElementById("calendar").focus();
    // You could write code to toggle this
}

アイコンをクリックすると、次の画像のような開いているカレンダービューを取得する必要があります

Answer 1

新しい人が役立つことを期待して、これに答えています：私のhtmlは次のようでした：

<div class='child_dob input-group <?php echo $user->parent_type>2 ?'hidden':''?>'>
  <input type='date' class='form-control hidden' name='dob[]' value='<?php echo $dob?>'>
  <div class='form-control datedisplay'>
     <?php echo date('m/d/Y',strtotime($dob))?>
  </div>
  <input type='hidden' value='<?php echo $id?>' name='id[]'>
  <div class='input-group-addon'>
     <span class='cursor glyphicon glyphicon-remove remove_child_dob'></span>
  </div>
</div>

$(function()
{
 $(document).on('click','.datedisplay',function()
 {
    $(this).siblings('[type="date"]').removeClass('hidden').focus().click();
    $(this).remove();
 });
});

Chrome シミュレーターと Android デバイスでテストしましたが、問題なく動作します。ただし、iOS デバイスでのテストが必要です。