Search code examples
htmlcssdatewebpicker

Hide input type=date but not date picker interface

I want to hide input type="date" but not the date picker interface:

<h1>My result</h1>
<div>
  <input type="date" id="datepicker">
  <label for="datepicker">Label</label>
</div>
<h1>Wanted result</h1>
<div>
  <span>Label</span>
</div>
<p>Comment: In wanted result, I want the date picker to show when I click the label.</p>

Solution

  • Tiny bit of research led to How to show calendar popup when input[type="date"] is on focus, and the method proposed in Abid Khairy's answer, using the HTMLInputElement.showPicker() method, appears to work quite well. Can't be demonstrated in a snippet here or a jsfiddle, because in cross-domain iframe contexts, it throws a security error. But in a stand-alone page, calling this on click of the label, worked fine (tested in a Chromium-based browser and Firefox; others you'd have to check, but browser support is quite good according to MDN.)

    Although the picker appeared in the top left window corner, if I hid the input with display: none. But with visibility: hidden; position: absolute; instead, that was solvable as well.

    <input type="date" id="datepicker" style="visibility: hidden; position: absolute;">
<label for="datepicker" onclick="document.getElementById('datepicker').showPicker();">
  Label
</label>