如何在ref中使用输入类型日期?

Question

我可以隐藏input type file并像这样从另一个元素触发它:

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

但是当我尝试用input type date时，它不起作用:

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

我能不能通过ref激活date picker?

Answer 1

你可以直接输入$refs.dateRef.showPicker():

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

Answer 2

一个解决方案似乎是强制显示选择器点击与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()">

，但在文档https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/showPicker中说如果你试图调用一个帧，你会得到一个安全异常

注意:日期，datetime-local，月，时间，星期的选择器启动以同样的方式。这里不能展示它们，因为实际示例正在运行在跨原点帧中，并且会导致SecurityError

Answer 3

您可以尝试showPicker()方法在按钮单击时激活日期选择器吗?

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>

在上面的代码片段中，我得到了这里也提到的跨域安全错误。你能在你的项目中试一试吗?