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:

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

Minimum boilerplate is here: Codepen

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:

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

Minimum boilerplate is here: Codepen

• javascript
• bulma

2 Answers 2

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

Use the "value" attribute, e.g. date today Feb.26, 2021

<input type="date" value="2021-02-26">