How to use input type date in ref?

user_7826511 0
Viewed 149

I can hide input type file and trigger it from another element like so:

<button @click="$refs.fileRef.click()"></button>
<input type="file" ref="fileRef" style="display: none">

but when I try that with input type date it doesn't work:

<button @click="$refs.dateRef.click()"></button>
<input type="date" ref="dateRef" style="display: none">

Any way I can activate the date picker via ref?

vuejs3 vue.js events input javascript
3 Answers

You could just do $refs.dateRef.showPicker():

<button @click="$refs.dateRef.showPicker()"></button>
<input type="date" ref="dateRef" style="display: none">
user_81728570

a solution seems to force display the picker on click with onclick="this.showPicker()"

  <button @click="$refs.fileRef.click()">file</button>
  <input type="file" ref="fileRef" style="display: none">


  <button @click="$refs.dateRef.click()">date</button>
  <input type="date" ref="dateRef" style="display: none" onclick="this.showPicker()">

but as say in the doc https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/showPicker if you try call in a frame you will have a security exception

Note: Pickers for date, datetime-local, month, time, week are launched in the same way. They cannot be shown here because live examples run in a cross-origin frame, and would cause a SecurityError

user_30547220

Can you try showPicker() method to activate the date picker on button click.

new Vue({
  el: '#app'
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <button @click="$refs.dateRef.click()">Click Me!</button>
  <input type="date" ref="dateRef" style="display: none" onclick="showPicker()"/>
</div>

In above code snippet, I am getting cross-domain security error which is also mentioned here. Can you please give a try in your project.

user_41163000
Related