有什么方法可以更改输入 type=“date” 格式吗？

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

无法更改格式

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

线材格式

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

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

演示格式

浏览器在显示日期输入的方式上不受限制。在撰写本文时，Chrome、Edge、Firefox 和 Opera 都支持日期（请参阅此处）。它们都显示一个日期选取器，并在输入字段中设置文本格式。

桌面设备

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

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

移动设备

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

Google Chrome浏览器在其上一个测试版中最终使用了输入，格式为。type=dateDD-MM-YYYY

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

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

• RFC 3339/ISO 8601“线格式”：YYYY-MM-DD。根据 HTML5 规范，这是在表单提交时或通过 DOM API 请求时必须用于输入值的格式。它与区域设置和区域无关。
• 用户界面控件显示并接受为用户输入的格式。鼓励浏览器供应商遵循用户的首选项选择。例如，在“语言与文本”偏好设置面板中选择“美国”区域的 Mac OS 上，Chrome 20 使用格式“m/d/yy”。

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

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

编辑：-我发现chrome使用的语言设置默认与系统设置相同，但用户可以更改它们，但开发人员不能强迫用户这样做，因此您必须使用其他js解决方案，例如我告诉您可以使用javascript日期选择器或jquery日期选择器等查询来搜索网络

如前所述，在大多数浏览器中都没有完全实现，所以让我们谈谈像浏览器（chrome）一样的webkit。<input type=date ... >

使用 linux，您可以通过更改环境变量来更改它，似乎不起作用（至少对我来说）。LANGLC_TIME

您可以键入终端来查看当前值。我认为同样的概念可以应用于IOS。locale

例如： 用：

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

但是似乎被 chrome 拒绝了（我认为这是 webkit 或 chrome 中的错误），可悲的是它不起作用。:'(LC_TIMEd_fmt

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

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

1） 在输入附近创建一个 span 类（充当标签）

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{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>

如前所述，官方无法更改格式。但是，可以设置字段的样式，因此（在一些 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 版 Safari 上运行良好（特别可取，因为触摸屏上的本机日期操纵器是无与伦比的恕我直言）。没有检查其他人，但不要指望在任何 Webkit 上失败。

自从这个问题被问到以来，Web领域发生了很多事情，其中最令人兴奋的是Web组件的登陆。现在，您可以使用专为满足您需求而设计的自定义 HTML5 元素优雅地解决此问题。如果你想覆盖/改变任何html标签的工作原理，只需使用shadow dom构建你的标签。

好消息是，已经有很多可用的样板，所以很可能你不需要从头开始想出一个解决方案。只需检查人们正在构建的内容并从那里获得想法即可。

你可以从一个简单（且有效）的解决方案开始，比如 datetime-input for polymer，它允许你使用这样的标签：

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

或者，您可以根据需要获得创意和弹出式的完整日期选择器，其中包含您想要的格式和区域设置、回调和一长串选项（您可以使用整个自定义 API！

符合标准，无黑客攻击。

仔细检查可用的 polyfills，它们支持哪些浏览器/版本，以及它是否覆盖了足够多的用户群......现在是 2018 年，所以它肯定会覆盖您的大多数用户。

希望对你有所帮助！

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

输出：

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

（在支持的浏览器、Chrome、Edge 和 Firefox 中进行了测试。

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

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

因此，无需更改它，如果我们不更改任何内容，用户将看到日期输入的格式与他们在系统/设备设置中配置的格式相同，并且他们熟悉或匹配他们的区域设置。

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

在 Windows 上更改系统日期格式：要更改Windows 10或更高版本上的系统日期格式，请转到“开始”菜单 -->日期和时间设置 -->日期，时间和区域格式-->更改区域格式（附图）。

更改格式后，您可能需要刷新页面或重新启动浏览器。

如果上述方法不起作用，您可以在 chrome 中尝试以下操作：

要更改 Chrome 中的格式（例如，从美国“MM/DD/YYYY”更改为 “DD/MM/YYYY”），你去>设置>高级>添加语言（选择 英语英国）。然后：浏览器 重新启动，您将找到如下日期输入字段： ´25/01/2022

请参阅谷歌开发人员页面。

WHATWG git hub 查询相同

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

<input type="date" id="dob" value=""/>

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

<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 在页面加载时为用户。

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

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

我是做什么的。 例如

var d="16/09/2019" // date received from card
function filldate(){
    document.getElementById('cardexpirydate').value=d.split('/').reverse().join("-");
    }

<input type="date" id="cardexpirydate">
<br /><br />
<input type="button" value="fill the date" onclick="filldate();">

代码的作用：

1. 它根据“/”拆分我得到的日期为 dd/mm/yyyy（使用 split（））并制作一个数组，
2. 然后它反转数组（使用 reverse（）），因为日期输入支持反转 我得到的。
3. 然后它根据（使用 join（））将数组连接到字符串中 输入字段所需的格式

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

我认为这会对一些人有所帮助，所以我写了这篇文章。

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

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

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

试试这个简单快捷的方法

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

感谢 @safi eddine 和 @Hezbullah Shah

带有 VanillaJS 和 CSS 的 Datepicker。

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

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

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

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 = falsemyDate

const birthday = document.getElementById("birthday");

const button = document.getElementById("wishBtn");


button.addEventListener("click", () => {
  let dateValue = birthday.value;
  // Changing format :)
  dateValue = dateValue.split('-').reverse().join('-');

  alert(`Happy birthday king/Queen of ${dateValue}`);
});

<input type="date" id="birthday" name="birthday" value="2022-10-10"/>

<button id="wishBtn">Clik Me</button>

其实不是。

可破解但非常纤薄和可定制的解决方案是：

1. 隐藏日期输入（CSS可见性：隐藏）（仍然显示日历弹出窗口）
2. 在上面放一个文本输入
3. 在文本输入点击时，使用JS获取日期输入元素并调用.showPicker（）
4. 将日期选取器值存储在其他位置
5. 在文本输入中以所需的自定义格式显示值

下面是一些示例 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>

这是一个简单紧凑的解决方案（解决方法），没有任何库。

使用两个输入。真实/实际输入（隐藏）和外观（实际显示，但没有“名称”属性，因此是假的）。

<div>
    <input name="date" id="actualDate" type="date" hidden onchange="dateFacade.value=datefacade(this.value)">     
    <input id="dateFacade" type="text" class="form-control" onclick="actualDate.showPicker()">       
</div>

<script>
    let datefacade = (inputDate) => (new Date(inputDate)).toLocaleDateString('en-UK',{dateStyle: 'full'});
</script>

工作原理：

单击立面时，将显示实际输入的日期选择器。当实际日期发生变化时（因为您在日期选取器上选择了日期），外观输入会发生变化。

当然，使用你自己的功能。datefacade

（警告：它在 Codepen 中不起作用（由于 Codepen 限制）。将代码复制到实际文件，它应该可以正常工作。HTML