有什么办法可以更改输入类型=“日期”格式？

我正在使用网页上的HTML5元素。默认情况下，输入将type="date"日期显示为YYYY-MM-DD。

现在的问题是，是否有可能它的格式更改为类似：DD-MM-YYYY？

无法更改格式

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

电汇格式

所述HTML5日期输入规范是指RFC 3339规范，它指定一个全日期格式等于：yyyy-mm-dd。有关更多详细信息，请参见RFC 3339规范的5.6节。

valueHTML属性和DOM属性使用此格式，并且是进行普通表单提交时使用的格式。

简报格式

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

桌面设备

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

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

移动设备

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

自从提出此问题以来，Web领域发生了很多事情，最令人兴奋的事情之一就是Web组件的登陆。现在，您可以使用旨在满足您需求的自定义HTML5元素优雅地解决此问题。如果您希望覆盖/更改任何html标签的工作原理，则可以使用shadow dom进行构建。

好消息是，已经有了很多样板，因此您很可能不需要从头开始提出解决方案。只需检查人们正在建设什么，然后从那里获取想法。

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

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

或者您也可以发挥创意和弹出完整的日期拾荒者风格如你所愿，用格式化和你的愿望语言环境，回调，和你长的选项列表（你有在您的处置整体定制API！）

符合标准，没有黑客。

仔细检查可用的polyfill，它们支持哪些浏览器/版本，以及它是否覆盖了您的用户群的足够百分比……是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的Safari浏览器上均能很好地工作（尤其可取，因为触摸屏上的本机日期操纵器是无与伦比的恕我直言）。没有检查其他人，但是不要指望在任何Webkit上都会失败。

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

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

HTML5规范不包括任何替代或手动指定格式的方法。

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

最终版本的Google Chrome浏览器最终使用了输入type=date，格式为DD-MM-YYYY。

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

如果您需要快速解决方案，请尝试执行此操作，以使yyyy-mm-dd变为“ dd- Sep -2016”

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

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>

在阅读了很多讨论之后，我准备了一个简单的解决方案，但是我不想使用很多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 /我如何自定义系统语言环境

您可以使用以下命令查看实际的当前日期格式date：

$ date +%x
01-06-2015

但随着LC_TIME和d_fmt似乎是由铬被拒绝（我认为这是在WebKit的或浏览器的错误），遗憾的是它不工作。：'（

因此，不幸的是，如果LANG环境变量不能解决您的问题，那么还没有办法。

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

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

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

但是，这种从系统设置获取日期格式的行为更好，我强烈建议我们不要尝试覆盖它。原因是，用户将看到日期输入的格式与他们在系统/设备中配置的格式相同，并且他们习惯或匹配其区域设置。

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

参照谷歌开发者页面。

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

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

我找到了一种更改格式的方法，这是一种棘手的方法，我只是使用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个月前。所以我也想提供自己的意见。

以我为例，我从读卡器接收日期，该读卡器为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（））到字符串

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

我以为这会有所帮助，所以我写了这个。

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

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

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