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

What causes the error "Why am I receiving a "Cannot read property 'length' of undefined" when looping through a pug template?

Tips for showcasing retrieved JSON with jQuery's ajax functionality

wait until the CSS parser retrieves the CSS files

Select box failing to display default value

Tips for creating a POST request using mongoose in NextJS version 13.4

What is the appropriate utilization of the await keyword within concise if-else statements in JavaScript?

Troubleshooting: Node.js Express Server GET Handler Failing to Function

Adjust the code to enhance the functionality of web components in Sharepoint

Ajax response data triggered twice

Determine the percentage using jQuery by considering various factors

Manipulating Angular and Typescript to utilize the method's parameter value as a JavaScript object's value

Discovering the total number of tickets based on priority in an array with Javascript

Center the image within the div by setting its position to absolute

Having difficulty locating the index of the column labeled `Clients` within a table; the result being -1

Unable to identify the pdf file using multer in node.js

Error: Express is undefined and does not have a property called 'use'

Understanding the lockfile: deciphering the significance of each line in the yarn.lock file

Unable to display images in the ngImgCrop upload preview modal screen

The onKeyUp event in Material-UI components does not seem to be functioning as

Every time I refresh the app, I am consistently redirected back to the home route "//"