The Bulma calendar date input fails to display the pre-filled start date

Question

The Bulma calendar date input fails to display the pre-filled start date

I am facing a challenge while trying to integrate the Bulma calendar into my project, particularly when it comes to setting a default start date.

According to the documentation, I am using the following method:

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

The selected date appears correctly when the date picker is open: https://i.stack.imgur.com/n1ju7.png

However, it does not appear in the input field initially:

https://i.stack.imgur.com/7JmRl.png

You can find the minimum required setup here: Codepen

javascript bulma

Answer 1

Answer №1

Give this a try:

HTML:

<input type="date" />

JS:

// Set up all date inputs
var dates = bulmaCalendar.attach('[type="date"]', {startDate: new Date('12/15/2021')});

// Iterate through each date input
for(var j = 0; j < dates.length; j++) {
    // Add event listener for date selected event
    dates[j].on('select', chosenDate => {
        console.log(chosenDate);
    });
}

// To access the bulmaCalendar instance of an element
var targetElement = document.querySelector('#target-element');
if (targetElement) {
    // The bulmaCalendar instance can be accessed via targetElement.bulmaCalendar
    targetElement.bulmaCalendar.on('select', function(datePicker) {
        console.log(datePicker.data.value());
    });
}

Answer 2

Give this a try:

HTML:

<input type="date" />

JS:

// Set up all date inputs
var dates = bulmaCalendar.attach('[type="date"]', {startDate: new Date('12/15/2021')});

// Iterate through each date input
for(var j = 0; j < dates.length; j++) {
    // Add event listener for date selected event
    dates[j].on('select', chosenDate => {
        console.log(chosenDate);
    });
}

// To access the bulmaCalendar instance of an element
var targetElement = document.querySelector('#target-element');
if (targetElement) {
    // The bulmaCalendar instance can be accessed via targetElement.bulmaCalendar
    targetElement.bulmaCalendar.on('select', function(datePicker) {
        console.log(datePicker.data.value());
    });
}

Answer 3

Answer №2

Implement the "value" parameter, for instance, current date is February 26, 2021

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

Answer 4

Implement the "value" parameter, for instance, current date is February 26, 2021

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

The Bulma calendar date input fails to display the pre-filled start date

Answer №1

Answer №2

Similar questions

Implementing translation text into a PHP database

What is the purpose of sorting an object using the sequence defined in an array?

Ways to Achieve the Following with JavaScript, Cascading Style Sheets, and Hypertext

Attempting to send a filled array to res.render, but struggling to implement a suitable async callback mechanism

Leveraging the power of mapState and mapMutations within a namespaced module

Enhancing gallery user experience with jquery to animate the opacity of active (hovered) thumbnails

Which takes precedence: the end of the script tag or the backtick?

"Modify hyperlink attributes to enhance security and optimize user experience

Utilizing Asynchronous Values in a Different JavaScript Function

A JavaScript code snippet to format a phone number in the pattern xx-xxxxxx

Is AGM-Map capable of providing all the same features as the Google Maps API?

Nextjs couldn't locate the requested page

Show PHP results in an Ajax modal box

What seems to be the issue with the data initialization function not functioning properly within this Vue component?

Error caused by MongoClient TypeError

What is the process for retrieving data from mongoDB and displaying it by year in a single row?

Enabling a variable to encompass various types within ReactJS

What is the reason behind the array.map() function not altering the original array?

Using JQuery to deactivate a button based on a specific select option

Generating variable names dynamically in JavaScript