区分两种不同的格式很重要:

The RFC 3339/ISO 8601 "wire format": YYYY-MM-DD. According to the HTML5 specification, this is the format that must be used for the input's value upon form submission or when requested via the DOM API. It is locale and region independent. The format displayed by the user interface control and accepted as user input. Browser vendors are encouraged to follow the user's preferences selection. For example, on Mac OS with the region "United States" selected in the Language & Text preferences pane, Chrome 20 uses the format "m/d/yy".

HTML5规范不包括任何覆盖或手动指定这两种格式的方法。

浏览器从用户的系统日期格式中获取日期输入格式。

(在支持的浏览器中测试，Chrome, Edge。)

由于目前还没有由规范定义的标准来改变日期控件的样式，因此不可能在浏览器中实现相同的功能。

用户可以在输入[type=date]的文本框中输入日期值，日期格式在框中显示为灰色文本。该格式从操作系统的设置中获得。Web作者没有办法更改日期格式，因为目前没有指定格式的标准。

所以不需要改变它，如果我们不改变任何东西，用户将看到日期输入的格式与他们在系统/设备设置中配置的相同，并且他们感到舒适或与他们的语言环境匹配。

记住，这只是用户在屏幕上看到的UI格式，在你的JavaScript/后端，你可以一直保持你想要的格式。

要在Chrome中更改格式(例如，从美式“MM/DD/YYYY”改为“DD/MM/YYYY”)，请访问>设置>高级>添加语言(选择英语英国)。然后:

浏览器重新启动，你会发现日期输入字段是这样的:´25/01/2022

参考谷歌开发者页面。

WHATWG git hub查询相同

测试使用以下日期输入:

<输入类型=“日期” id=“dob” 值=“”/>

感谢@safi eddine和@真主党Shah

Datepicker与VanillaJS和CSS。

CSS样式:

/*================== || Date Picker ||=======================================================================================*/

/*-------Removes the // Before dd - day------------------------*/
input[type="date"]::-webkit-datetime-edit-text
{
    color: transparent;    
}




/*------- DatePicker ------------------------*/
input[type="date"] {
    background-color: aqua;
    border-radius: 4px;
    border: 1px solid #8c8c8c;
    font-weight: 900;
}





/*------- DatePicker - Focus ------------------------*/
input[type="date"]:focus 
{
    outline: none;
    box-shadow: 0 0 0 3px rgba(21, 156, 228, 0.4);
}






input[type="date"]::-webkit-datetime-edit, input[type="date"]::-webkit-inner-spin-button, input[type="date"]::-webkit-clear-button {
    color: #fff;
    position: relative;    
}



    /*------- Year ------------------------*/
    input[type="date"]::-webkit-datetime-edit-year-field {
        position: absolute !important;
        border-left: 1px solid #8c8c8c;
        padding: 2px;
        color: #000;
        left: 56px;
    }


    /*------- Month ------------------------*/
    input[type="date"]::-webkit-datetime-edit-month-field {
        position: absolute !important;
        border-left: 1px solid #8c8c8c;
        padding: 2px;
        color: #000;
        left: 26px;
    }



    /*------- Day ------------------------*/
    input[type="date"]::-webkit-datetime-edit-day-field {
        position: absolute !important;
        color: #000;
        padding: 2px;
        left: 4px;
    }

JAVASCRIPT:

 // ================================ || Format Date Picker || ===========================================================
    function GetFormatedDate(datePickerID)
    {
        let rawDate = document.getElementById(datePickerID).value; // Get the Raw Date
        return rawDate.split('-').reverse().join("-"); // Reverse the date
    }

使用:

 document.getElementById('datePicker').onchange = function () { alert(GetFormatedDate('datePicker')); }; // The datepickerID

如前所述，官方不可能更改格式。然而，它可以对字段设置样式，因此(在一点JS的帮助下)它以我们想要的格式显示日期。这样就失去了操作日期输入的一些可能性，但如果强制使用格式的愿望更强烈，那么这种解决方案可能是一种方法。日期字段只保持这样:

<input type="date" data-date="" data-date-format="DD MMMM YYYY" value="2015-08-09">

剩下的是一些CSS和JS: http://jsfiddle.net/g7mvaosL/

$("input").on("change", function() { this.setAttribute( "data-date", moment(this.value, "YYYY-MM-DD") .format( this.getAttribute("data-date-format") ) ) }).trigger("change") input { position: relative; width: 150px; height: 20px; color: white; } input:before { position: absolute; top: 3px; left: 3px; content: attr(data-date); display: inline-block; color: black; } input::-webkit-datetime-edit, input::-webkit-inner-spin-button, input::-webkit-clear-button { display: none; } input::-webkit-calendar-picker-indicator { position: absolute; top: 3px; right: 0; color: black; opacity: 1; } <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <input type="date" data-date="" data-date-format="DD MMMM YYYY" value="2015-08-09">

它在台式机的Chrome上运行得很好，在iOS上运行得很好(尤其可取，因为在触摸屏上的本机日期操纵器是无敌的)。没有检查其他的，但是不要期望在任何Webkit上失败。

Firefox的新版本(未知版本)，在设置>语言中，他们增加了一个选项:使用您的操作系统设置“西班牙语(西班牙)”来格式化日期、时间、数字和测量

这个选项将使用操作系统的区域设置来显示日期!太糟糕了，它不是默认启用的(也许从一个新的安装它?)

不是真的没有。

可破解但非常轻薄和可定制的解决方案将是:

隐藏日期输入(CSS可见性:隐藏)(仍然显示日历弹出) 在上面放一个文本输入 在文本输入中单击，使用JS获取日期输入元素并调用.showPicker() 将日期选择器值存储在其他地方 在文本输入中以您想要的自定义格式显示值

下面是一些react代码示例:

               <div style={{ width: "100%", position: "relative" }}>
                    <input type="date" className={`form-control ${props.filters[dateFromAccessor] ? '' : 'bh-hasNoValue'}`} id={`${accessor}-date-from`} placeholder='from'
                        value={toDate(props.filters[dateFromAccessor])} style={{ marginRight: 0, visibility: "hidden" }}
                        onChange={e => {
                            props.setFilters({ ...props.filters, [dateFromAccessor]: inputsValueToNumber(e) })
                        }} />
                    <input type="text" className="form-control" readOnly
                        style={{ position: "absolute", top: 0, left: 0, width: "100%", height: "100%", backgroundColor: "white" }}
                        value={toDate(props.filters[dateFromAccessor])}
                        onClick={(e) => {
                        e.stopPropagation();
                        e.preventDefault();
                        (document.getElementById(`${accessor}-date-from`) as any)?.showPicker();
                    }}></input>
                </div>