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 (e.g. 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>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>