有没有办法改变输入类型=“日期”格式？

无法更改格式

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

有线格式

HTML5 date input specification 指的是 RFC 3339 specification，它指定了一个完整的日期格式，等于：yyyy-mm-dd。有关详细信息，请参阅 RFC 3339 规范的 section 5.6。

此格式由 value HTML 属性和 DOM 属性使用，并且是在执行普通表单提交时使用的格式。

演示格式

浏览器在如何呈现日期输入方面不受限制。在撰写本文时，Chrome、Edge、Firefox 和 Opera 支持日期（请参阅 here）。它们都显示一个日期选择器并格式化输入字段中的文本。

桌面设备

对于 Chrome、Firefox 和 Opera，输入字段文本的格式取决于浏览器的语言设置。对于 Edge，它基于 Windows 语言设置。遗憾的是，所有 Web 浏览器都会忽略操作系统中配置的日期格式。对我来说，这是非常奇怪的行为，在使用这种输入类型时需要考虑一些事情。例如，将操作系统或浏览器语言设置为 en-us 的荷兰用户将显示为 01/30/2019，而不是他们习惯的格式：30-01-2019。

Internet Explorer 9、10 和 11 以有线格式显示文本输入字段。

移动设备

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

---

自从提出这个问题以来，网络领域发生了很多事情，其中最令人兴奋的是 web components 的登陆。现在，您可以使用专为满足您的需求而设计的 custom HTML5 element 优雅地解决此问题。如果您希望覆盖/更改任何 html 标签的工作方式，只需使用 shadow dom 构建您的标签即可。

好消息是已经有很多样板可用，因此您很可能不需要从头开始提出解决方案。只需check人们正在构建的东西并从中获得想法。

您可以从一个简单（且有效）的解决方案开始，例如用于聚合物的 datetime-input，它允许您使用这样的标签：

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

或者，您可以获得创意和弹出式完整日期选择器 styled as you wish，其中包含您想要的格式和语言环境、回调以及您的一长串选项（您有一个完整的自定义 API 供您使用！）

符合标准，没有黑客攻击。

仔细检查 available polyfills，他们支持什么 browsers/versions，以及它是否覆盖了足够多的用户群……现在是 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") 输入 { 位置：相对；宽度：150px；高度：20px；白颜色; } 输入：之前 { 位置：绝对；顶部：3px；左：3px；内容：attr（数据日期）；显示：内联块；颜色：黑色; } 输入::-webkit-datetime-edit，输入::-webkit-inner-spin-button，输入::-webkit-clear-button { 显示：无； } 输入::-webkit-calendar-picker-indicator { 位置：绝对；顶部：3px；右：0；颜色：黑色;不透明度：1； }

它在桌面版 Chrome 和 iOS 版 Safari 上运行良好（特别理想，因为触摸屏上的本机日期操纵器是无与伦比的恕我直言）。没有检查其他人，但不要指望在任何 Webkit 上失败。

---

It's important to distinguish two different formats：

RFC 3339/ISO 8601“有线格式”：YYYY-MM-DD。根据 HTML5 规范，这是在表单提交或通过 DOM API 请求时必须用于输入值的格式。它独立于语言环境和地区。

由用户界面控件显示并作为用户输入接受的格式。鼓励浏览器供应商遵循用户的偏好选择。例如，在“语言和文本”首选项窗格中选择“美国”区域的 Mac OS 上，Chrome 20 使用“m/d/yy”格式。

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

---

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

输入[type="date"]::-webkit-datetime-edit, input[type="date"]::-webkit-inner-spin-button, input[type="date"]::-webkit-clear -按钮{颜色：#fff;位置：相对； } input[type="date"]::-webkit-datetime-edit-year-field{ position: absolute !important;左边框：1px 实心 #8c8c8c;填充：2px；颜色：#000;左：56px； } input[type="date"]::-webkit-datetime-edit-month-field{ position: absolute !important;左边框：1px 实心 #8c8c8c;填充：2px；颜色：#000;左：26px； } input[type="date"]::-webkit-datetime-edit-day-field{ position: absolute !important;颜色：#000;填充：2px；左：4px； }

---

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

---

谷歌浏览器在其最后一个测试版中终于使用了输入 type=date，格式为 DD-MM-YYYY。

所以必须有一种方法来强制一种特定的格式。我正在开发一个 HTML5 网页，现在日期搜索因不同的格式而失败。

---

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

输出：

https://i.stack.imgur.com/QmFug.png

---

两年前我搜索了这个问题，我的谷歌搜索再次将我引向了这个问题。不要浪费时间尝试用纯 JavaScript 来处理这个问题。我浪费时间试图让它dd/mm/yyyy。没有适合所有浏览器的完整解决方案。所以我建议使用 momentJS / jQuery datepicker 或告诉您的客户使用默认日期格式

---

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

（在支持的浏览器、Chrome、Edge 中测试。）

由于目前规范没有定义标准来更改日期控件的样式，因此无法在浏览器中实现相同的样式。

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

因此无需更改它，如果我们不更改任何内容，用户将看到日期输入的格式与他们在系统/设备设置中配置的格式相同，并且他们对他们的语言环境感到满意或匹配。

请记住，这只是用户在屏幕上看到的 UI 格式，在您的 JavaScript/后端中，您始终可以使用所需的格式。

要更改 Chrome 中的格式（例如，从美国“MM/DD/YYYY”更改为“DD/MM/YYYY”），请转到 > 设置 > 高级 > 添加语言（选择英国英语）。然后：

https://i.stack.imgur.com/S6nSq.png

浏览器重新启动，您会发现如下日期输入字段：´25/01/2022

Refer google developers page on same.

使用以下日期输入进行测试：

---

如果您需要快速解决方案，请尝试此操作 使 yyyy-mm-dd 转到“dd- Sep -2016”

1）在您的输入附近创建一个跨度类（充当标签）

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

适用于 webkit 浏览器手机和 IE11+ 的指针事件需要 jQuery 和 Jquery Date

$("#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{文本缩进：-500px；高度：25px；宽度：200px;}

---

如前所述，<input type=date ... > 并未在大多数浏览器中完全实现，所以让我们谈谈类似浏览器 (chrome) 的 webkit。

使用 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 中的错误），遗憾的是 它不起作用。 :'(

因此，不幸的是，响应是 IF LANG 环境变量不能解决您的问题，目前还没有办法。

---

无法更改 web-kit 浏览器使用用户计算机或手机的默认日期格式。但是，如果您可以使用 jquery 和 jquery UI，则有一个可设计的日期选择器，并且可以根据开发人员的需要以任何格式显示。 jquery UI 日期选择器的链接在此页面上 http://jqueryui.com/datepicker/ 您可以找到演示以及代码和文档或文档链接

编辑：-我发现 chrome 使用默认等于系统设置的语言设置，但用户可以更改它们，但开发人员不能强迫用户这样做，所以你必须使用其他 js 解决方案，比如我告诉你可以搜索网络使用 javascript date-pickers 或 jquery date-picker 之类的查询

---

由于该帖子在 2 个月前处于活动状态。所以我也想给出我的意见。

就我而言，我从 dd/mm/yyyy 格式的读卡器收到日期。

我所做的。例如

var d="16/09/2019" // 从卡片接收的日期 function filldate(){ document.getElementById('cardexpirydate').value=d.split('/').reverse().join("-" ); }

代码的作用：

它根据“/”将我得到的日期拆分为 dd/mm/yyyy（使用 split()）并创建一个数组，然后将数组反转（使用 reverse()），因为日期输入支持反转我明白了。然后它根据输入字段所需的格式将数组连接（使用join（））到字符串

所有这些都在一行中完成。

我认为这会对某些人有所帮助，所以我写了这个。

---

我调整了 Miguel 的代码以使其更易于理解，我想与像我一样有问题的人分享。

试试这个简单快捷的方法

$("#datePicker").on("change", function(e) { displayDateFormat($(this), '#datePickerLbl', $(this).val()); });函数 displayDateFormat(thisElement, datePickerLblId, dateValue) { $(thisElement).css("color", "rgba(0,0,0,0)") .siblings(`${datePickerLblId}`) .css({ position: “绝对”，左侧：“10px”，顶部：“3px”，宽度：$(this).width() }) .text(dateValue.length == 0 ? "" : (`${getDateFormat(new Date( dateValue))}`)); } function getDateFormat(dateValue) { let d = new Date(dateValue); // 这个模式 dd/mm/yyyy // 你可以设置你需要的模式 let dstring = `${("0" + d.getDate()).slice(-2)}/${("0" + ( d.getMonth() + 1)).slice(-2)}/${d.getFullYear()}`;返回字符串； } .date-selector { 位置：相对； } .date-selector>input[type=date] { text-indent: -500px; }

---

Firefox 中的新功能（因为未知版本），在设置 > 语言中，他们添加了一个选项：使用“西班牙语（西班牙）”的操作系统设置来格式化日期、时间、数字和测量值

此选项将使用操作系统的区域设置来显示日期！太糟糕了，默认情况下它没有启用（也许是全新安装？）

---

感谢@safi eddine 和@Hezbullah Shah

https://i.stack.imgur.com/9p3QE.png

https://i.stack.imgur.com/8stP0.png

https://i.stack.imgur.com/HM20z.png

https://i.stack.imgur.com/OYM0G.png

带有 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

---

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 指向您想要的控件。

---

常量生日 = document.getElementById("生日");常量按钮 = document.getElementById("wishBtn"); button.addEventListener("click", () => { let dateValue =birthday.value; // 改变格式 :) dateValue = dateValue.split('-').reverse().join('-'); alert(`${dateValue} 的国王/王后生日快乐`); }); 点击我

---

我知道这是一篇旧帖子，但它是谷歌搜索中的第一个建议，简短回答否，推荐回答用户自定义日期 piker，我使用的正确答案是使用文本框来模拟日期输入并做任何你想要的格式, 这是代码

<html>
<body>
date : 
<span style="position: relative;display: inline-block;border: 1px solid #a9a9a9;height: 24px;width: 500px">
    <input type="date" class="xDateContainer" onchange="setCorrect(this,'xTime');" style="position: absolute; opacity: 0.0;height: 100%;width: 100%;"><input type="text" id="xTime" name="xTime" value="dd / mm / yyyy" style="border: none;height: 90%;" tabindex="-1"><span style="display: inline-block;width: 20px;z-index: 2;float: right;padding-top: 3px;" tabindex="-1">&#9660;</span>
</span>
<script language="javascript">
var matchEnterdDate=0;
//function to set back date opacity for non supported browsers
    window.onload =function(){
        var input = document.createElement('input');
        input.setAttribute('type','date');
        input.setAttribute('value', 'some text'); 
        if(input.value === "some text"){
            allDates = document.getElementsByClassName("xDateContainer");
            matchEnterdDate=1;
            for (var i = 0; i < allDates.length; i++) {
                allDates[i].style.opacity = "1";
            } 
        }
    }
//function to convert enterd date to any format
function setCorrect(xObj,xTraget){
    var date = new Date(xObj.value);
    var month = date.getMonth();
    var day = date.getDate();
    var year = date.getFullYear();
    if(month!='NaN'){
        document.getElementById(xTraget).value=day+" / "+month+" / "+year;
    }else{
        if(matchEnterdDate==1){document.getElementById(xTraget).value=xObj.value;}
    }
}
   </script>
  </body>
</html>

1- 请注意，此方法仅适用于支持日期类型的浏览器。

2- JS 代码中的第一个函数用于不支持日期类型的浏览器并将外观设置为普通文本输入。

3-如果您将此代码用于页面中的多个日期输入，请在函数调用和输入本身中将文本输入的 ID“xTime”更改为其他内容，当然使用您想要的输入名称表单提交。

4-在第二个函数中，您可以使用任何您想要的格式，而不是 day+" / "+month+" / "+year 例如 year+" / "+month+" / "+day 并在文本输入中使用占位符或值作为yyyy / mm / dd 为页面加载时的用户。

---