bulma-calendar: Unable to pre-select time with data-start-time

Hi guys,

I’ve been fighting with this bug as well. Maybe you’ll find useful my hacky-from-non-js-dev function.

function fixPrefilledDateTime (calendar) {
        
    if (options.startDate != null) {
        const hours = options.startDate.getHours();
        const minutes = options.startDate.getMinutes();
        // set value
        if (calendar.timePicker._time.start != null) {
            calendar.timePicker._time.start = options.startDate;
        }
        // set ui
        if (calendar.timePicker._ui.start.hours.number != null && calendar.timePicker._ui.start.minutes.number != null) {
            calendar.timePicker._ui.start.hours.number.innerHTML = hours;
            calendar.timePicker._ui.start.minutes.number.innerHTML = minutes;
        }
    }
    
    if (options.endDate != null) {
        const hours = options.endDate.getHours();
        const minutes = options.endDate.getMinutes();
        // set value
        if (calendar.timePicker._time.end != null) {
            calendar.timePicker._time.end = options.endDate;
        }
        // set ui
        if (calendar.timePicker._ui.end.hours.number != null && calendar.timePicker._ui.end.minutes.number != null) {
            calendar.timePicker._ui.end.hours.number.innerHTML = hours;
            calendar.timePicker._ui.end.minutes.number.innerHTML = minutes;
        }
    }
    calendar.refresh();
}

@DebugTheCode I’ve made a lot of changes in the last days. It can also be in the changes from 6.1.0 to 6.1.1. As you can see in the docs (https://doc.mh-s.de/bulma-calendar/demonstration/datetime/#range-selection) the preset start / end date and time is set:

hello, does anyone know how to display the current time in the input, like this->

Thank you in advance for your reply.

Found a way around the isRange: true bit HTML: <input id="event-event_start_datetime" type="datetime" value="01/20/2020 01:15 - 01/21/2020 23:59">

JAVASCRIPT:

$(document).ready(function () {
 
 // save off the incoming(preset)  
   let incomingDate = $('#event-event_start_datetime').val();

 // Initialize datetimepicker
    let calendars = bulmaCalendar.attach('#event-event_start_datetime', {
        isRange: true,
        dateFormat: 'MM/DD/YYYY',
        timeFormat: 'HH:mm',
        showHeader: false,
        showTodayButton: false,
        showClearButton: false,
        validateLabel: "Select",
        minuteSteps: 15,
        labelFrom: 'Event Start',
        labelTo: 'Event End'
    });

    if (incomingDate) {
        // something wrong with bulma code and start date hours and minutes not populated
        // have a value of: MM/DD/YYYY HH:MM - MM/DD/YYYY HH:MM (startDate startTime - endDate endTime)
        // get the startDate hours and minutes
        let incomingStartHours = incomingDate.substring(11, 13);
        let incomingStartMinutes = incomingDate.substring(14, 16);
        let incomingStartDate = incomingDate.substring(0, 16);

        // put values into proper spots for the calendar to have pre-populated start time
        $('input#event-event_start_datetime').val(incomingDate);
        $('.datetimepicker-dummy-input.is-datetimepicker-range').val(incomingStartDate);
        $('.timepicker-start .timepicker-hours .timepicker-input-number').text(incomingStartHours);
        $('.datetimepicker-selection-start .datetimepicker-selection-hour').text(incomingStartHours + ':' + incomingStartMinutes);
        $('.timepicker-start .timepicker-minutes .timepicker-input-number').text(incomingStartMinutes);
    }

    // Loop on each calendar initialized
    for (let i = 0; i < calendars.length; i++) {
        // Add listener to date:selected event
        calendars[i].on('select', date => {
            console.log(date);
        });
    }

    // To access to bulmaCalendar instance of an element
    let element1 = document.querySelector('#event-event_datetime_start');
    if (element1) {
        // bulmaCalendar instance is available as element.bulmaCalendar
        element1.bulmaCalendar.on('select', function (datepicker) {
            console.log(datepicker.data.value());
        });
    }
});

I’m encountering the same issue while attempting to set startTime and endTime initial values for a timepicker on version 6.0.7. Commenting in the hope this issue can be revisited.