CODEWITHSUNDEEP
javascriptvue.jseventsinputvuejs3
Artur Müller Romanov
Artur Müller Romanov

Reputation: 5751

How to use input type date in ref?

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?

Upvotes: 3

Views: 1993

Answers (3)

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

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

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

Upvotes: 2

Roh&#236;t J&#237;ndal
Roh&#236;t J&#237;ndal

Reputation: 27192

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.

Upvotes: 1

jeremy-denis
jeremy-denis

Reputation: 6878

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

Upvotes: 1

Related Questions