I’m trying to set up a time picker so the user can pick a date and schedule a call. The operation should open a pop up with google calendar, but I keep getting this error:
Error during scheduling:
RangeError: Invalid time value

$(document).ready(function() {
    $('#date-picker').datepicker({
        format: 'mm/dd/yyyy',
        startDate: '-3d'
    });

    $('#time-picker').timepicker({
        showMeridian: false,
        timeFormat: 'HH:mm'
    });

    function formatDateTime(date, time) {
        console.log("Date input:", date);
        console.log("Time input:", time);

        const [month, day, year] = date.split('/');
        if (!month || !day || !year) {
            console.error('Invalid date format:', date);
            throw new RangeError('Invalid date format');
        }

        // Ensure time is in HH:mm format
        const [hours, minutes] = time.split(':');
        if (!hours || !minutes) {
            console.error('Invalid time format:', time);
            throw new RangeError('Invalid time format');
        }

        const formattedDate = `${year}-${month}-${day}T${hours}:${minutes}:00`;
        console.log("Formatted Date-Time:", formattedDate);

        const dateTime = new Date(formattedDate);
        console.log("DateTime object:", dateTime);

        return dateTime;
    }

    function getISODate(dateTime) {
        console.log("Checking dateTime validity:", dateTime);
        if (!(dateTime instanceof Date) || isNaN(dateTime)) {
            console.error('Invalid dateTime:', dateTime);
            throw new RangeError('Invalid time value');
        }
        // Google Calendar needs date and time in a specific format
        return dateTime.toISOString().replace(/-|:|.ddd/g, "").slice(0, -4) + 'Z';
    }

    async function simulateAsyncOperation() {
        return new Promise(resolve => {
            setTimeout(() => {
                resolve('Operation completed');
            }, 2000);
        });
    }

    $('#schedule-form').on('submit', async function(event) {
        event.preventDefault();

        const submitBtn = $(this).find('.submit-btn');
        submitBtn.addClass('loading');

        const date = $('#date-picker').val();
        const time = $('#time-picker').val();

        if (date && time) {
            try {
                const dateTime = formatDateTime(date, time);
                const isoDate = getISODate(dateTime);
                console.log("ISO Date:", isoDate);

                // Google Calendar needs a range of time
                const endDateTime = new Date(dateTime.getTime() + 30 * 60000); // Adding 30 minutes
                const isoEndDate = getISODate(endDateTime);
                console.log("ISO End Date:", isoEndDate);

                const calendarUrl = `https://www.google.com/calendar/render?action=TEMPLATE&text=Schedule%20a%20Call&dates=${isoDate}/${isoEndDate}&details=Call%20with%20Sicilia&sf=true&output=xml`;

                await simulateAsyncOperation();

                submitBtn.removeClass('loading');
                openPopup(calendarUrl);
            } catch (error) {
                console.error('Error during scheduling:', error);
                submitBtn.removeClass('loading');
                alert('Invalid date or time.');
            }
        } else {
            submitBtn.removeClass('loading');
            alert("Please select both a date and a time.");
        }
    });

    function openPopup(url) {
        try {
            const width = 600;
            const height = 700;
            const left = (screen.width - width) / 2;
            const top = (screen.height - height) / 2;
            window.open(url, 'GoogleCalendar', `width=${width},height=${height},top=${top},left=${left}`);
        } catch (error) {
            console.error('Failed to open popup:', error);
        }
    }

It doesn’t populate the time, just the hours, but when I try to write any hour, it gives me the error.