在阅读了大量的讨论之后，我准备了一个简单的解决方案，但我不想使用大量的Jquery和CSS，只是一些javascript。

HTML代码:

<input type="date" id="dt" onchange="mydate1();" hidden/>
<input type="text" id="ndt"  onclick="mydate();" hidden />
<input type="button" Value="Date" onclick="mydate();" />

CSS代码:

#dt {
  text-indent: -500px;
  height: 25px;
  width: 200px;
}

Javascript代码:

function mydate() {
  //alert("");
  document.getElementById("dt").hidden = false;
  document.getElementById("ndt").hidden = true;
}

function mydate1() {
  d = new Date(document.getElementById("dt").value);
  dt = d.getDate();
  mn = d.getMonth();
  mn++;
  yy = d.getFullYear();
  document.getElementById("ndt").value = dt + "/" + mn + "/" + yy
  document.getElementById("ndt").hidden = false;
  document.getElementById("dt").hidden = true;
}

输出:

我找到了一种改变格式的方法，这是一个棘手的方法，我只是用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">

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

我相信浏览器将使用本地日期格式。不要认为这是可能改变的。当然，您可以使用自定义日期选择器。

如果你需要一个快速的解决方案，可以试试这个方法，让yyyy-mm-dd变成“dd- september -2016”

1)在您的输入附近创建一个span类(充当标签)

2)每次用户更改日期或需要从数据中加载时更新标签。

工作的webkit浏览器移动和指针事件的IE11+需要jQuery和jQuery日期

$("#date_input").on("change", function () { $(this).css("color", "rgba(0,0,0,0)").siblings(".datepicker_label").css({ "text-align":"center", position: "absolute",left: "10px", top:"14px",width:$(this).width()}).text($(this).val().length == 0 ? "" : ($.datepicker.formatDate($(this).attr("dateformat"), new Date($(this).val())))); }); #date_input{text-indent: -500px;height:25px; width:200px;} <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script> <input id ="date_input" dateformat="d M y" type="date"/> <span class="datepicker_label" style="pointer-events: none;"></span>

要改变格式是不可能的

我们必须区分在线格式和浏览器的表示格式。

有线格式

HTML5日期输入规范引用了RFC 3339规范，该规范指定的完整日期格式等于:yyyy-mm-dd。有关更多详细信息，请参阅RFC 3339规范的5.6节。

value HTML属性和DOM属性使用这种格式，并且在进行普通表单提交时使用这种格式。

报告格式

浏览器在显示日期输入方面是不受限制的。在编写Chrome, Edge, Firefox和Opera的日期支持(见这里)。它们都显示一个日期选择器，并在输入字段中格式化文本。

桌面设备

For Chrome, Firefox, and Opera, the formatting of the input field's text is based on the browser's language setting. For Edge, it is based on the Windows language setting. Sadly, all web browsers ignore the date formatting configured in the operating system. To me this is very strange behaviour, and something to consider when using this input type. For example, Dutch users that have their operating system or browser language set to en-us will be shown 01/30/2019 instead of the format they are accustomed to: 30-01-2019.

Internet Explorer 9、10和11显示wire格式的文本输入字段。

移动设备

特别是对于Android上的Chrome，格式是基于Android显示语言的。我怀疑其他浏览器也是如此，尽管我还没能证实这一点。