How to customize HTML DATE input.. what are the options besides jQuery datePicker?

Question

I am trying to format the input type='date' in my file. I want to achieve the following:

1. if the user enters an illegal date, e.g. 29 Feb 2021, or 31 Jun, I want to show immediate alert saying that "entered illegal date :: 31 June does not exist". To explain further, I tried using input type='date' and entered an invalid date, however the value returned by the date input was basically lost, i.e. Blank. I still want to re-use/show the illegal date; How do I tap into an 'illegal value' 'event' thing somehow, if that's build into HTML? I could do something like

$("#Date1").change(function{
    if(!$(this).val())
        { alert($(this).val() + "is not a valid date");
            $(this).css('border','2px solid red');
        }   
    //some more code to check all special cases, e.g. leap year.. but that defeats the purpose: tons of code for something thats obviously built in somewhere?
})

2. I want to show date format in DD-MMM-YYYY format inside the input; e.g. 25-Feb-2021, I tried using date-date-format='dd-mmm-yyyy" in the input tag, it doesn't work. I have seen this 'data-date-format' attribute in several example/questions on the web, how do I enable/make it work? ref image below..

3. Instead of the 'Pull down Arrow' for the calendar, I want to show a small Calendar icon.. is it possible to do that using CSS/ -webkit and not jQuery datepicker? ref image below..

So for the above 3 things, I just want to know what my options are with simple CSS and -webkit- before I plunge into jQuery datePicker stuff..

Here is what I want to achieve somewhat:

[ dd-mmm-yyyy '|||'] when date not selected,

[ 25-FEB-2021 '|||'] when date selected

'|||' = calendar icon

Sorry if its not clear what I want; I basically want to play around with the options and features that are customizable until I arrive at what I feel will work!

Below is some short code I was experimenting with.

<div id='Date_List' class='div_COL dat_LST ord2'>
<label class='ord1'>Specific Dates<label id='IDT2_e' class='DT_er'>!!</label></label>
    <input type='date' id='ID4' class='inp_date ord2' data-date-format="dd-mm-yyyy">
    <input type='date' id='ID5' class='inp_date ord3' data-date-format="dd-mm-yyyy">
    <input type='date' id='ID6' class='inp_date ord4' data-date-format="dd-mm-yyyy">
    <input type='date' id='ID7' class='inp_date ord5' data-date-format="dd-mm-yyyy">
    <input type="date" id='ID7' class='inp_date ord6' data-date="" data-date-format="DD/MM/YYYY" value="2020-08-29">
</div>  

.inp_date  
{   min-width: 110px;
    max-width: 190px;
    box-sizing: border-box;
    height: 24px;                               
    flex: 1;                
    text-align: left;    
    background: #e5e5e5;
}

input[type="date"]::-webkit-inner-spin-button { 
    display: none;
}
                            
/* Saw the below CSS somewhere .. the URL line didnt work for me, as trying to get the Calendar icon  */ 
input[type="date"]::-webkit-calendar-picker-indicator {                     
    color: #2b2d42;     
    url: (https://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/calendar_2.png)  97% 50% no-repeat ; *                               
}                             
input[type="date"]::-webkit-clear-button {
    display: none;
}