SOURCE

function formatDateInput() {
    const input = document.querySelector('input');
    const placeholder = '-';

    // Default value as current system date
    let currentDate = new Date().toISOString().slice(0, 10);
    input.value = currentDate.replace(/-/g, placeholder);

    input.addEventListener('input', () => {
        let value = input.value.replace(/[^\d]/g, '');
        let formattedValue = '';

        if (value.length === 4) {
            formattedValue = value.slice(0, 4);
        } else if (value.length === 6) {
            formattedValue = `${value.slice(0, 4)}${placeholder}${value.slice(4, 6)}`;
        } else if (value.length === 8) {
            formattedValue = `${value.slice(0, 4)}${placeholder}${value.slice(4, 6)}${placeholder}${value.slice(6, 8)}`;
        }

        input.value = formattedValue;
    });

    input.addEventListener('keydown', (event) => {
        if (event.key === 'Delete' || event.key === 'Backspace') {
            const selectionStart = input.selectionStart;
            const selectionEnd = input.selectionEnd;

            if (selectionStart === selectionEnd) {
                if (event.key === 'Delete') {
                    if (selectionStart === input.value.length) {
                        // Delete the last character
                        input.value = input.value.slice(0, -1);
                    } else {
                        // Delete the character before the cursor
                        input.value = input.value.slice(0, selectionStart - 1) + input.value.slice(selectionStart);
                    }
                } else if (event.key === 'Backspace') {
                    if (selectionStart === 0) {
                        // Delete the first character
                        input.value = input.value.slice(1);
                    } else {
                        // Delete the character after the cursor
                        input.value = input.value.slice(0, selectionStart) + input.value.slice(selectionStart + 1);
                    }
                }

                // Ensure the placeholder is displayed
                if (input.value === '') {
                    input.value = placeholder.repeat(3);
                }
            } else {
                // Delete the selected characters
                input.value = input.value.slice(0, selectionStart) + input.value.slice(selectionEnd);
            }
        }
    });
}

<input type="text" class="input" id="input">