title: how to have an open date picker in html
body: <p>i have the following date picker, which works as bellow</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type="date" id="start" name="trip-start"
         value="2018-07-22"
         min="2018-01-01" max="2018-12-31"&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>as you can see you have to click on the input box for the drop down calendar to open.
  How can i have the dropdown calendar always open instead of having to click on the input box.i just want the calendar to show as follows.i dont want to show the input box, i want to get the date clicked from the calendar and i will pass it to another function</p>
  <p><a href="https://i.stack.imgur.com/nxw3f.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nxw3f.png" alt="calendar" /></a></p>