Estoy tratando de integrar un selector de tiempo en mi página web. Estoy usando Bulma Calender para esto.
Sin embargo, los resultados solo se muestran y almacenan en el campo de entrada cuando se presiona el botón "Validar" en el selector de tiempo. Para mi propósito, también quiero poner la información seleccionada en el campo de entrada, cuando no se presiona el botón "Validar" (por ejemplo, simplemente haga clic en cualquier otro lugar de la página web después de elegir una hora).
En el calendario de bulma hay un evento oculto, que puedo activar y poner los resultados en la consola: console.log(datepicker.data.value());
Sin embargo, no puedo poner el tiempo seleccionado en el campo de entrada.
Ya probé cosas como:
document.querySelector('#my-element').value=datepicker.data.value(); document.getElementById('my-element').value=datepicker.data.value();pero ninguno de ellos está funcionando.
¿Alguna idea de lo que tengo que cambiar?
<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>De los documentos, hay un método de save que se usa para configurar los datos del calendario en la interfaz de usuario.
<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>