How do I get learner to input a current date?

I'll leave the solution I came to here for anyone else who might be experiencing the same issue with design formatting solutions as well. 

I used Nedim's JavaScript code and template for FlatPickr's calendar date picker from Date Picker | Articulate - Community article, but the default date was showing YYYY/MM/DD and I needed it to display in the U.S. style of MM/DD/YYYY so CoPilot helped me change the code to this:

// Load js
const loadScript = (url, callback) => {
let script = document.createElement('script');
script.src = url;
script.onload = callback;
document.head.appendChild(script);

};

// Load css
const loadCSS = (url) => {
let link = document.createElement('link');
link.rel = 'stylesheet';
link.href = url;
document.head.appendChild(link);

};

loadCSS('https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css');
loadCSS('https://npmcdn.com/flatpickr/dist/themes/material_green.css');
// Available themes: dark, material_blue, material_green, material_red, material_orange, airbnb, confetti

loadScript('https://cdn.jsdelivr.net/npm/flatpickr', () => {
const dateInput = document.querySelector('.acc-textinput');
if (dateInput) {
// Initialize Flatpickr on the input field
flatpickr(dateInput, {
dateFormat: "m/d/Y", // <-- This sets MM/DD/YYYY format

onChange: (selectedDates, dateStr) => {
dateInput.value = dateStr; // Set the selected date in the input field
setVar('dateSelected', dateStr);

},
onClose: (selectedDates, dateStr) => {
dateInput.disabled = true;
setTimeout(() => {
dateInput.disabled = false;
}, 100);

}

});

}

});

Now I needed to format the design of the calendar date picker as the default was set to a green calendar header. I changed this line in the code from loadCSS('https://npmcdn.com/flatpickr/dist/themes/material_green.css'); to loadCSS('https://npmcdn.com/flatpickr/dist/themes/material_white.css'); so the calendar is white and used CoPilot to write an override code to adjust the default colors. Here's the updated code I used to have a calendar with a white background and black text with date showing in MM/DD/YYYY format.

// Load js
const loadScript = (url, callback) => {
    let script = document.createElement('script');
    script.src = url;
    script.onload = callback;
    document.head.appendChild(script);
};

// Load css
const loadCSS = (url) => {
    let link = document.createElement('link');
    link.rel = 'stylesheet';
    link.href = url;
    document.head.appendChild(link);
};

loadCSS('https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css');
loadCSS('https://npmcdn.com/flatpickr/dist/themes/material_white.css');
// Available themes: dark, material_blue, material_green, material_red, material_orange, airbnb, confetti

// Override header color
const style = document.createElement('style');
style.innerHTML = `
    .flatpickr-months .flatpickr-month {
        background-color: #FFFFFF !important;
    }
    .flatpickr-current-month input.cur-year,
    .flatpickr-current-month .flatpickr-monthDropdown-months {
        color: black !important; /* optional: makes text readable */
    }
`;
document.head.appendChild(style);

loadScript('https://cdn.jsdelivr.net/npm/flatpickr', () => {
    const dateInput = document.querySelector('.acc-textinput');
    if (dateInput) {
        // Initialize Flatpickr on the input field
        flatpickr(dateInput, {
            dateFormat: "m/d/Y",   // <-- This sets MM/DD/YYYY format

            onChange: (selectedDates, dateStr) => {
                dateInput.value = dateStr; // Set the selected date in the input field
                setVar('dateSelected', dateStr);
            },
            onClose: (selectedDates, dateStr) => {
                dateInput.disabled = true;
                setTimeout(() => {
                    dateInput.disabled = false;
                }, 100);
            }
        });
    }
});