JSFiddle - React, Tailwind, and code Playground

HTML

<input id="date" style="font-size: 20px" maxlength="10" type="text" />

JavaScript

$("#date").on("keyup", function()
{
    let valid = /^\d{0,4}$|^\d{4}-0?$|^\d{4}-(?:0?[1-9]|1[012])(?:-(?:0?[1-9]?|[12]\d|3[01])?)?$/.test(this.value), input = this.value;
    
    if(!valid) {
        this.value = input.substring(0, input.length - 1);
        this.style.backgroundColor = '#EEA39C';
    }
    setTimeout(() => { this.style.backgroundColor = '#88DD85'; }, 700);
});