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

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

问题是，是否可以将其格式更改为：DD-MM-YYYY？

我浪费时间尝试将其设置为dd / mm / yyyy。只需使用诸如moment或jQuery datepicker之类的另一个库

#1 楼

无法更改格式

我们必须在有线格式和浏览器的演示格式之间进行区分。

有线格式

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

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

演示文稿格式

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

台式机设备

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

移动设备

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

我本来希望有一个JS时间戳，而不是wireformat。改变演示格式的方法很难保持一致。

–艾伦·基默·詹森（Allan Kimmer Jensen）
2012年11月22日9:53

@AllanKimmerJensen虽然我了解您的想法。我相信使用RFC3339中指定的格式的决定是正确的，因为它不会在HTML和JavaScript之间建立耦合。关于您的第二点，我认为从可用性的角度来看，让用户根据其区域偏好来查看日历是有意义的。

– David Walschots
2013年1月30日10:47

如果应用程序是pt_BR，则我希望输入pt_BR。我的系统设置无关紧要。 HTML5需要某种方式来强制区域设置。

–iurisilvio
15年1月26日在19:14

我使用西班牙语作为日期/货币设置的语言环境，因为我居住在西班牙，但是我的第一语言是英语，而且我习惯于美国键盘布局，因此我使用英语/美国键盘。我的客户是讲法语的欧洲人。...我希望我可以向Chrome等提示停止以美国mm-dd-yyyy格式显示日期！

–卢克·H
15年8月31日在12:59

什么无用的组件，到底是谁提出的？

– Boh
16-6-10上午8:40

#2 楼

自从问了这个问题以来，Web领域发生了很多事情，最令人兴奋的事情之一就是Web组件的登陆。现在，您可以使用适合您需求的自定义HTML5元素优雅地解决此问题。如果您想覆盖/更改任何html标记的工作原理，只需构建自己的影子dom。

好消息是，已经有很多样板可以使用，因此您很可能不需要从头开始提出解决方案。只需检查人们正在构建的东西，然后从那里获取想法即可。

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

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

，或者您可以根据需要获得具有创意和弹出式完整日期选择器的样式，以及所需的格式和区域设置，回调以及一长串的选项（您可以使用一个完整的自定义API！）

符合标准，没有黑客。

再次检查可用的polyfill，它们支持哪些浏览器/版本，以及它是否覆盖了您的用户群的足够百分比……是2018年，因此它肯定会覆盖大多数用户。 br />
希望有帮助！

但是这些可本地化吗？即将月份名称更改为非英语。它们可以在台式机和移动设备上工作吗？

–山姆·哈斯勒
15年8月24日在13:50

当然，它们可以本地化。您可以利用系统的语言环境（即is.gd/QSkwAY）或在Web组件内提供i18n文件（即is.gd/Ru9U82）。对于移动浏览器，虽然还不是100％（但），但仍使用polyfill支持它们。请查看我发布的浏览器/版本链接。再次，这是前沿。如果您具有前瞻性，这是一个很好的解决方案。

–sdude
15年8月24日在18:27

抱歉，我没有看到您的最新评论。这：jcrowther.io/2015/05/11/i18n-and-web-components看起来非常有用，应该包含在答案中。

–山姆·哈斯勒
15年8月27日在8:44

很高兴您发现它有用。我将用所有内容更新答案。

–sdude
15年8月27日在12:33

尽管显然有100多个人不同意，但在我看来，这个答案似乎并没有增加任何有用的内容。没有理由说明为什么Web组件（而不是为网页创建可重用的窗口小部件的任何其他方式）应该是这里的选择解决方案，并且至少建议的第一个组件有点垃圾（没有日历弹出窗口，如果出现某些疯狂的行为）我输入的数字过大，例如当天）。另外，您实际上没有展示如何使用任何建议的组件设置自定义日期格式，这意味着最终这并不能解决所提出的问题。

– Mark Amery
1月16日19:48

#3 楼

如前所述，正式不可能更改格式。但是，可以对字段进行样式设置，因此（在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上失败。

这不起作用，您将其更改为MMMM YYYY DD，仅更改DD。 -1，抱歉

–可以发送垃圾邮件吗
15年8月21日在11:48

@SamSwift-更改值后是否单击“运行”？ ;）

– pmucha
2015年9月11日9:11

不，他不是。您不了解它是如何工作的：您使用JS，应该使用HTML。您已经更改了矩函数的输入格式，这不是可行的方法。您应该更改了data-date-format =“ DD-YYYY-MM”，然后将获得09-2015-08的正确结果。

– pmucha
16年6月8日在10:05

在Safari，Edge，Opera中均无法使用-这使其无法使用

–MaxZoom
18年4月26日在17:13

在Firefox中损坏

–亚历山大·拉里尔（Alexander Lallier）
18-10-3在15:53

#4 楼

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

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

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

值属性是否与导线格式匹配，或者向用户显示什么？

– Flimm
17年8月17日在15:46

@Flimm value属性始终与导线格式匹配。

– David Walschots
18 Mar 2 '18 at 20:52

#5 楼

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

当地日期格式意味着我们的电话默认日期格式还是位置日期格式？

– Govinda Rao Kondala
2011年10月11日4:14

取决于您使用的移动浏览器。但我怀疑这将是手机的默认设置。

– Michael Mior
2011年10月11日13:00

“本地”格式表示基于地理位置，这可能是确定日期格式的最差方法。前往欧洲旅行的美国人会期望他们的智能手机开始以24小时格式显示时间，并将日期显示为yyyy-mm-dd或dd / mm / yyyy吗？反之亦然？

–RobG
16年5月19日在0:06

#6 楼

最后一个Beta版本的Google Chrome最终使用输入type=date，其格式为DD-MM-YYYY。

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

您提到的DD-MM-YYYY格式可能是您的本地日历格式。在网站的访问者上强制使用一种特定格式是不明智的（据我所知，在当前的HTML5标准中是不可能的），因为它们可能习惯于与您强制使用的日历格式不同的日历格式。

– David Walschots
2012年8月22日在8:49

您指的是演示文稿格式，因为如果您尝试读取input.val（），则无论演示文稿格式是什么，谷歌chrome（v35）都会以yyyy-mm-dd格式返回日期。

–倾斜
2014年6月27日15:31

如果只有美国人会意识到将弱智的m-d-y格式强加给世界其他地方，这是多么不明智的做法，@ DavidWalschots会说。

–user275801
18-09-24在9:35

@ user275801虽然我同意M-D-Y是一种奇怪的格式。我还没有看到美国人将它强加于人。 :-)

– David Walschots
18-09-24在17:27

@DavidWals选择了我见过的大多数软件和操作系统，要求您“选择退出”美国的m-d-y格式。从这个意义上讲，它实际上是“强制的”。实际上，我的linux具有澳大利亚的所有区域设置，但是我的浏览器（如果可以将其称为美国浏览器）仍然自行显示mdy格式的所有日期，在这种情况下，我无法“选择退出”。

–user275801
18-10-8在2:01

#7 楼

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

它在Firefox浏览器中不起作用。有什么办法可以在Firefox中使用CSS处理日期格式？

–Shoaib
11月14日13:32

#8 楼

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

输出：

#9 楼

如果需要快速解决方案，请尝试此操作。要使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{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>

这不能回答问题，需要2个库，两个库都没有标记或要求。它还不允许手动输入日期。

–RobG
16年5月19日在0:16

不需要更改它，仅显示格式...您可以将其作为预览，并在更改事件中使用输入，以无论如何更新格式。

–米格尔
16年5月19日在2:30

#10 楼

+1好极了！使用：LANG = ja_JP.UTF-8铬浏览器帮了我大忙。它也可以与Vivaldi一起使用，我想也可以在其他浏览器中使用。谢谢！

–lepe
2015年8月17日在1:10

#11 楼

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

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

由于自规范起没有规范定义现在要更改日期控件的样式，无法在浏览器中实现。

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

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

请参考google开发人员页面在同一页面上。

#12 楼

无法更改Web-kit浏览器以使用用户计算机或手机的默认日期格式。
但是，如果可以使用jquery和jquery UI，则可以选择日期选择器，开发者可以将其以任何格式显示。想要。
到jQuery UI日期选择器的链接在此页面上
http://jqueryui.com/datepicker/您可以找到演示以及代码和文档或文档链接

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

#13 楼

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

#14 楼

由于该帖子活跃于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();">

代码的作用是：

它根据（使用split（））将我得到的日期分割为dd / mm / yyyy（使用split（）） “ /”并创建一个数组，
然后反转数组（使用reverse（）），因为日期输入支持我得到的结果的
。
然后它联接（使用join）（））根据输入字段要求的格式将数组转换为字符串

所有这些操作均在一行中完成。

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

这没有解决所问的问题；您在这里解析自定义格式，而不更改用于显示值的格式。

– Mark Amery
1月16日20:53

#15 楼

您可以使用占位符属性来实现。
例如：

<input type="date" placeholder="dd.MM.yyyy">

#16 楼

我知道这是一个旧帖子，但是它是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”以及输入本身在其他内容中的ID，当然使用您要提交表单的输入的名称。

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

编程黑洞网