Javascript: Put time picker into input field
Question
I am tring to integrate a time picker into my webpage. I'm using Bulma Calender for this.
However, results are only displayed and stored in the input field, when the "Validate" button in the time picker is pressed. For my purpose, I also want to put the selected information into the input field, when the "Validate" button is not pressed (eg just click anywhere else on the webpage after choosing a time).
In bulma calendar there is a hide event, which I am able to trigger and to put the results into console: console.log(datepicker.data.value());
However, I am not able to put the selected time into the input field.
I already tried stuff like:
document.querySelector('#my-element').value=datepicker.data.value();
document.getElementById('my-element').value=datepicker.data.value();
but none of them is working.
Any idea what I need to change?
<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 answers
solution1
1 2021-12-30 23:44:36
From the docs, there is a save method used to set calendar data into the UI.
<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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.