Angular开发者(也许还有其他人)可以考虑这个部分解决方案。

我的策略是检测输入字段的焦点状态，并相应地在日期和文本类型之间切换。明显的缺点是日期格式会随着输入焦点而改变。

这不是完美的，但确保了一个不错的一致性水平，特别是当你有一些日期显示为文本，也有一些日期输入在你的web应用程序。如果你只有一个日期输入，这不会是很有帮助的。

<input class="form-control"
       [type]="myInputFocus ? 'date' : 'text'"
       id="myInput"
       name="myInput"
       #myInput="ngModel"
       [(ngModel)]="myDate"
       (focus)="myInputFocus = true"
       (blur)="myInputFocus = false">

并且简单地在组件类的开头声明myInputFocus = false。 显然，将myDate指向所需的控件。

我在两年前搜索了这个问题，我的谷歌搜索再次把我带到了这个问题。 不要浪费时间试图用纯JavaScript处理这个问题。我把时间都浪费在日日夜夜的制作上了。没有适合所有浏览器的完整解决方案。所以我建议使用momentJS / jQuery datepicker，或者告诉你的客户端使用默认的日期格式

我找到了一种改变格式的方法，这是一个棘手的方法，我只是用CSS代码改变了日期输入字段的外观。

input[type="date"]::-webkit-datetime-edit, input[type="date"]::-webkit-inner-spin-button, input[type="date"]::-webkit-clear-button { color: #fff; position: relative; } input[type="date"]::-webkit-datetime-edit-year-field{ position: absolute !important; border-left:1px solid #8c8c8c; padding: 2px; color:#000; left: 56px; } input[type="date"]::-webkit-datetime-edit-month-field{ position: absolute !important; border-left:1px solid #8c8c8c; padding: 2px; color:#000; left: 26px; } input[type="date"]::-webkit-datetime-edit-day-field{ position: absolute !important; color:#000; padding: 2px; left: 4px; } <input type="date" value="2019-12-07">

我调整了米格尔的代码，让它更容易理解 我想和像我一样有问题的人分享。

试试这个简单快捷的方法

$("#datePicker").on("change", function(e) { displayDateFormat($(this), '#datePickerLbl', $(this).val()); }); function displayDateFormat(thisElement, datePickerLblId, dateValue) { $(thisElement).css("color", "rgba(0,0,0,0)") .siblings(`${datePickerLblId}`) .css({ position: "absolute", left: "10px", top: "3px", width: $(this).width() }) .text(dateValue.length == 0 ? "" : (`${getDateFormat(new Date(dateValue))}`)); } function getDateFormat(dateValue) { let d = new Date(dateValue); // this pattern dd/mm/yyyy // you can set pattern you need let dstring = `${("0" + d.getDate()).slice(-2)}/${("0" + (d.getMonth() + 1)).slice(-2)}/${d.getFullYear()}`; return dstring; } .date-selector { position: relative; } .date-selector>input[type=date] { text-indent: -500px; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="date-selector"> <input id="datePicker" class="form-control" type="date" onkeydown="return false" /> <span id="datePickerLbl" style="pointer-events: none;"></span> </div>

自从这个问题被提出后，web领域发生了很多事情，其中最令人兴奋的是web组件的登陆。现在，您可以使用定制的HTML5元素优雅地解决这个问题，以满足您的需求。如果你想覆盖/改变任何html标签的工作方式，只需使用shadow dom构建你的。

好消息是，已经有很多可用的样板文件，所以很可能你不需要从头开始想出一个解决方案。看看人们在做什么，然后从中获得灵感。

你可以从一个简单(有效)的解决方案开始，比如聚合物的datetime-input，它允许你使用这样的标签:

 <date-input date="{{date}}" timezone="[[timezone]]"></date-input>

或者您可以获得创意和弹出完整的日期选择器样式，如您所希望的，与格式和区域设置，回调，和您的长选项列表(您有一个完整的自定义API在您的处置!)

符合标准，没有黑客。

仔细检查可用的插件，它们支持哪些浏览器/版本，以及它是否覆盖了足够百分比的用户基础……现在是2018年，所以它肯定会覆盖你的大部分用户。

希望能有所帮助!

如前所述，官方不可能更改格式。然而，它可以对字段设置样式，因此(在一点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上失败。