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指向所需的控件。

在阅读了大量的讨论之后，我准备了一个简单的解决方案，但我不想使用大量的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;
}

输出:

如上所述，<input type=date…>在大多数浏览器中都没有完全实现，所以让我们来谈谈webkit之类的浏览器(chrome)。

使用linux，您可以通过更改环境变量LANG, LC_TIME似乎不起作用(至少对我来说)。

您可以在终端中键入locale以查看当前值。我认为同样的理念也适用于IOS。

例如: 使用:

LANG=en_US.UTF-8 /opt/google/chrome/chrome

日期显示为mm/dd/yyyy

使用:

LANG=pt_BR /opt/google/chrome/chrome

日期显示为dd/mm/yyyy

您可以使用http://lh.2xlibre.net/locale/pt_BR/(根据您的语言环境更改pt_BR)来创建您自己的自定义语言环境并按照您想要的格式设置日期。

关于如何更改默认系统日期的一个更高级的参考是: https://ccollins.wordpress.com/2009/01/06/how-to-change-date-formats-on-ubuntu/ 而且 https://askubuntu.com/questions/21316/how-can-i-customize-a-system-locale

你可以看到你的真实当前日期格式使用date:

$ date +%x
01-06-2015

但是LC_TIME和d_fmt似乎被chrome拒绝了(我认为这是webkit或chrome中的一个bug)，遗憾的是它不起作用。: ' (

所以，不幸的是，如果LANG环境变量不能解决你的问题，还没有办法。

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

试试这个简单快捷的方法

$("#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>

我在两年前搜索了这个问题，我的谷歌搜索再次把我带到了这个问题。 不要浪费时间试图用纯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">