如何在REF中使用输入类型日期？

发布于 2025-02-12 21:04:55 字数 437 浏览 2 评论 0原文

我可以隐藏输入类型文件并从其他元素触发它：

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

但是当我使用输入类型date日期尝试时，它无效：

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

我可以激活该方法日期选择器通过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?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

花想c 2025-02-19 21:04:55

您可以只做$ refs.dateref.showpicker（）：

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

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

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

回复收藏 0 原文

羞稚 2025-02-19 21:04:55

一个解决方案似乎强制显示picker在单击上使用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()">

，但是如doc https://developer.mozilla.org/en-us/docs/web/api/htmlinputelement/showpicker
如果您尝试在框架中打电话，您将有一个安全例外

注意：启动日期，日期本地，月，时间，一周的选择器
以同样的方式。他们不能在这里显示，因为实时示例运行
在交叉框架中，会导致SecurityError

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

回复收藏 0 原文

断桥再见 2025-02-19 21:04:55

您可以尝试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>

在上面的代码段中，我遇到了跨域安全错误，这也提到在这里。您能在项目中尝试一下吗？

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.

回复收藏 0 原文

~没有更多了~