javascript - 如何自定义 HTML DATE 输入.. 除了 jQuery datePicker 之外还有哪些选项？

Question

我正在尝试在我的文件中格式化输入 type='date'。我想实现以下目标：

1. 如果用户输入了非法日期，例如 2021 年 2 月 29 日或 6 月 31 日，我想立即显示“输入的非法日期 :: 6 月 31 日不存在”的警报。为了进一步解释，我尝试使用 input type='date' 并输入了一个无效的日期，但是日期输入返回的值基本上丢失了，即空白。我仍然想重新使用/显示非法日期；如果它内置在 HTML 中，我如何以某种方式利用“非法价值”“事件”？我可以做类似的事情

$("#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. 我想在输入中以 DD-MMM-YYYY 格式显示日期格式；例如 2021 年 2 月 25 日，我尝试在输入标签中使用 date-date-format='dd-mmm-yyyy"，但它不起作用。我在几个示例中看到了这个 'data-date-format' 属性/网络上的问题，我如何启用/使其工作？参考下面的图片..

3. 我想显示一个小的日历图标，而不是日历的“下拉箭头”。是否可以使用 CSS/-webkit 而不是 jQuery datepicker 来做到这一点？参考下面的图片..

因此，对于上述 3 件事，我只想知道在我投入 jQuery datePicker 之前，我可以使用简单的 CSS 和 -webkit- 有哪些选择。

这是我想要达到的目标：

[ dd-mmm-yyyy '|||'] 未选择日期时，

[ 25-FEB-2021 '|||'] 选择日期时

'|||' = 日历图标

抱歉，如果不清楚我想要什么；我基本上想玩弄可定制的选项和功能，直到我觉得我觉得可行！

下面是我正在试验的一些短代码。

<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;
}

标签： javascripthtmljquerycssdate