Hide input type=date but not date picker interface-CodePudding

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>

CodePudding user response：

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>

CodePudding user response：

    <html>
        <head>
        <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
        <style>
          .div{
              display: none;
          }
        </style>
        </head>
        <body>
        <h1>My result</h1>
        <div>
          <a id="picker" href="#">Click Here To Get Date Picker</a>
        </div>
        <div id="item" >
          <label for="datepicker">Select Date:</label>
          <input type="date" id="datepicker">
        </div>

        <p>Comment: In wanted result, I want the date picker to show when I click the label.</p>

        </body>
        <script>
          $( "#picker" ).click(function() {
            $( "#item" ).toggle();
        });
        </script>
</html>