javascriptbulma

Bulma calendar date input does not show the pre-populated start date


I am trying implement Bulma calendar in my project and I have a difficult setting a default start date.

I am doing the following as per documentation.

<input type="date" data-start-date="10/24/2019">

The date shows up fine when the date picker is open: Preset start date shows in the datepicker

However, it does not show up in the input to begin with:

Empty input field

Minimum boilerplate is here: Codepen


Solution

  • Try it like this:

    HTML:

    <input type="date" />
    

    JS:

    // Initialize all input of type date
    var calendars = bulmaCalendar.attach('[type="date"]', {startDate: new Date('10/24/2019')});
    
    // Loop on each calendar initialized
    for(var 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
    var element = document.querySelector('#my-element');
    if (element) {
        // bulmaCalendar instance is available as element.bulmaCalendar
        element.bulmaCalendar.on('select', function(datepicker) {
            console.log(datepicker.data.value());
        });
    }