Javascript：将时间选择器放入输入字段
[英]Javascript: Put time picker into input field
问题描述
我正在尝试将时间选择器集成到我的网页中。 我正在为此使用布尔玛日历。
但是，只有在按下时间选择器中的“验证”按钮时，结果才会显示和存储在输入字段中。 出于我的目的，我还想在未按下“验证”按钮时将所选信息放入输入字段（例如，选择时间后只需单击网页上的其他任何位置）。
在布尔玛日历中有一个隐藏事件，我可以触发它并将结果放入控制台： console.log(datepicker.data.value());
但是，我无法将所选时间放入输入字段。
我已经尝试过类似的东西：
document.querySelector('#my-element').value=datepicker.data.value();
document.getElementById('my-element').value=datepicker.data.value();
但他们都没有工作。
知道我需要改变什么吗？
<html> <head> <link href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css" rel="stylesheet" /> <link href="http://xn--spth-moa.eu/bulma-calendar.min.css" rel="stylesheet" /> <script src="http://xn--spth-moa.eu/bulma-calendar.min.js"></script> </head> <body> <div style="height:100px; width:200px;"> <input class="input" type="time" id="my-element"> <script> // Initialize all input of date type. const calendars = bulmaCalendar.attach('[type="time"]', { type: "time", displayMode: "default" }); // To access to bulmaCalendar instance of an element const element = document.querySelector('#my-element'); if (element) { // bulmaCalendar instance is available as element.bulmaCalendar element.bulmaCalendar.on('hide', datepicker => { //what do i need to enter here? console.log(datepicker.data.value()); }); } </script> </div> </body> </html>
1 个解决方案
解决方案1
1 2021-12-30 23:44:36
从文档中，有一种用于将日历数据设置到 UI 中的save方法。
<html> <head> <link href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css" rel="stylesheet" /> <link href="http://xn--spth-moa.eu/bulma-calendar.min.css" rel="stylesheet" /> <script src="http://xn--spth-moa.eu/bulma-calendar.min.js"></script> </head> <body> <div style="height:100px; width:200px;"> <input class="input" type="time" id="my-element"> <script> // Initialize all input of date type. const calendars = bulmaCalendar.attach('[type="time"]', { type: "time", displayMode: "default" }); // To access to bulmaCalendar instance of an element const element = document.querySelector('#my-element'); if (element) { // bulmaCalendar instance is available as element.bulmaCalendar element.bulmaCalendar.on('hide', datepicker => { //what do i need to enter here? datepicker.data.save(); }); } </script> </div> </body> </html>
如何通过 javascript 在 html 输入字段中放置度数符号
[英]How to put a degree symbol in an html input field through javascript
使用Javascript捕获值输入字段并将其放在目标URL中
[英]Catch the value input field with Javascript and put it in destination URL
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.