Unable to pre-select time with data-start-time

[Verbat]

I'm not able to initilize / pre-select the time with data-attributes.

<input type="time" data-start-time="10:00" value="10:00" name="start_time" id="start_time" >

The form looks fine and I can select a time but initializing it beforehand does not work with a time of my choosing. Is it a bug or am I doing it wrong?

I'm on the latest bulma-calender release which i believe is 6.0.4

[Wikiki]

Hi,

I think it's a bug. I'll have a look on it.

[rafarx]

I have the same problem with daterange, I can't set startDate and endDate using setters.
I can get their value with getters.

[viiter]

same problem, cannot pre set startDate and endDate
adding it as the element attributes like this

<input type="date" id="datepicker" data-start-date="2019-05-13" />

or as options

const datePickerEl = document.getElementById('datepicker');

bulmaCalendar.attach(datePickerEl, {
    type: 'date',
    dateFormat: 'YYYY/MM/DD',
    isRange: true,
    showFooter: false,
    weekStart: 1,
    startDate: '2019-05-13',
    endDate: '2019-05-26'
});

or via the setters

datePickerEl.bulmaCalendar.startDate('2019-05-13'');

am i doing something wrong? how do i set the default start date for the calendar

[Wikiki]

Anyone is doing anything wrong. It's a bug. I'm working on it.

[Cashbourne]

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.

[davidgil]

Hi, someone knows a workaround for this? i was trying several ideas with no luck.

[davidgil]

Hi, reviewing it in detail, the doc is wrong, to init time you must use properties: start and end, both are Date

[paoloramos]

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.

Same here. Has anyone found a work around?

[maliahavlicek]

as davidgil mentioned, the docs are wrong, enter it with your startDate... the following in options worked for me:

let calendars = bulmaCalendar.attach('[type="datetime"]',
{
startDate: today + ' 10:00',
minDate: today,
maxDate: oneYear,
minuteSteps: 15
});

But that doesn't help if you have isRange: true..... I can't get it set the proper start time for a date range.

[maliahavlicek]

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());
        });
    }
});

[sts-ryan-holton]

Same issue on Vue JS:

/**
 * Init custom datetime picker from Bulma
 */
initDateTimePicker: function () {
  var now = new Date()
  console.log(moment(now).format('HH:mm'))
  const calendar = bulmaCalendar.attach(this.$refs.calendarTrigger, {
    type: 'datetime',
    dateFormat: 'YYYY-MM-DD',
    timeFormat: 'HH:mm',
    startDate: moment(now).format('YYYY-MM-DD'),
    startTime: moment(now).format('HH:mm'),
    showHeader: false,
    showButtons: false,
    showFooter: false,
    displayMode: 'dialog'
  })[0]
  calendar.on('select',date => {
    console.log(date.data.value())
  });
}

Any workaround?

[Dzoukr]

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();
}

[sasdecompte]

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

Thank you in advance for your reply.

[tommed]

Urgh, wish I'd seen this ticket before using this control. It's been open since last year and causes a fundamental break. There really should be a warning about this on the bulma site if it's not fit for us atm. 😠

[jEstevezRod]

Unbelievable that this continues without work... after 1 year and a half...

[pmkrawczyk]

I second the above comment - basic functionality completely broken

[djvergad]

All the people complaining that this doesn't work can create a pull request to fix it, it's open source after all.

[DebugTheCode]

Same issue here.

[michael-hack]

Should be fixed with 6.1.2

[DebugTheCode]

@michael-hack what was the fix? I've checked 6.1.2 file changes, but I can't resolve where the fix is implemented. Thanks :)

[michael-hack]

@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:

[Doddlin]

I am on v6.1.7 but still data-start-time="14:00" makes no difference to me? What is the expected input? Does it need a datetime value?

[michael-hack]

No, it can be a datetime, but a string is also ok if it has the same format as configured under dateFormat / timeFormat. If it is a datetime field, there must also be a data-start-date, otherwise no value will be displayed. With a pure time field data-start-time is sufficient.

Can you maybe show us a short snippet?

[Doddlin]

Sure, this is how I have set it up:

input(type="datetime",
                            name="end_dt",
                            data-type="datetime",
                            data-display-mode="dialog",
                            data-is-range="true",
                            data-minute-steps=1,
                            data-start-time="13:00",
                            data-label-from="Start",
                            data-label-to="Slut",
                            data-date-format="dd/MM/yyyy",
                            data-lang="sv"
                            data-week-start=1,
                            data-validate-label="OK",
                            data-cancel-label="Avbryt",
                            data-clear-label="Rensa",
                            data-today-label="Idag").input#calendar  

All of the other parameters are taken into consideration but the startTime. (File is a pug-template file)

[michael-hack]

Thanks, it's the missing "data-start-date" for a datetime field, add data-start-date="01/07/2021" and it should work.

I'll change that someday, that you can also just specify the time at a datetime.