How do I close the picker for type="datetime-local"-CodePudding

I am using vue and i have type="datetime-local". I am able to select the date and time but I want the picker to close after a time has been selected.

I have tried to add an on change but can't find the correct code that will close the picker

CodePudding user response：

Use the blur method to close the picker when any time/date is selected.

Here is the demo-

<html>
  <div id="app">
    <input type="datetime-local" id="td" name="td" @input="close()" />
  </div>
  <!-- Don't forget to include Vue from CDN! -->
  <script src="https://unpkg.com/vue@2"></script>
  <script>
    new Vue({
      el: '#app', //Tells Vue to render in HTML element with id "app"
      methods: {
        close() {
          let el = document.getElementById("td");
          if (el) {
            el.blur();
          }
        },
      }
    });
  </script>
</html>

CodePudding user response：

type="datetime-local" is implemented by the browser, and you should not change the default behavior. That would confuse users.