有没有办法改变inputtypes=“date”格式？

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

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

这是不可能改变的格式

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

Wire格式 HTML5dateinput规范[1]是指RFC3339规范[2]，它指定了一个等于：yyyy-mm-dd的全date格式。 有关更多详细信息，请参阅RFC3339规范的第5.6节。

演示文稿格式浏览器不限制如何显示dateinput。 在编写本文时[3]，Microsoft Edge拥有最广泛的date支持。 他们使用用户的本地日历格式显示dateselect器。 Opera 10.6+还会显示dateselect器，但是会以连线格式显示date。 其他浏览器（例如Firefox 51.0.1和Internet Explorer 9/10/11）则显示带有格式的文本input字段。

参考

  1. http://www.w3.org/TR/html-markup/input.date.html
  2. http://tools.ietf.org/html/rfc3339
  3. https://plus.google.com/102860501900098846931/posts/hTcMLVNKnec

由于这个答案在networking领域发生了不less的事情，最令人激动的是web组件的登陆。 现在，您可以使用专为满足您的需求而devise的自定义HTML5元素来优雅地解决此问题。 如果你想覆盖/改变任何HTML标签的工作，只是build立你的阴影dom玩。

好消息是已经有很多样板可用了，所以很可能你不需要从头开始提供解决scheme。 只要检查人们正在build设，并从那里得到的想法。

你可以从一个简单的（和工作）解决scheme开始，比如date-util聚合物，它允许你使用这样一个标签： 

 <date-util format="dd/MM/yyyy"></date-util>

并将其作为input字段进行调整……或者您可以根据自己的意愿创build和popup完整的dateselect器，使用您想要的格式和语言环境，callback以及长长的选项列表（您有一个整个定制的API在您的处置！）

符合标准，没有黑客。

尽pipe我们已经快到了，但这仍然是一个前瞻性的解决scheme：IE 10和老朋友不会支持自定义标签，所以仔细检查可用的polyfills ，他们支持哪些浏览器/版本 ，如果它覆盖了足够的用户群…在几个月内，它肯定会覆盖大部分用户，因为所有主要的浏览器厂商都对这个规范感兴趣，并且360的实现非常接近。

希望它有帮助！

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

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

HTML5规范不包含任何重写或手动指定任何格式的方法。

如前所述，正式不可能改变格式。 但是可以对字段进行样式设置，所以（只需要一点JS帮助）就可以按照我们所需的格式显示date。 操作dateinput的一些可能性是以这种方式丢失的，但是如果强制格式的愿望更大，这种解决scheme可能是一种方法。 date字段保持如下状态： 

 <input type="date" data-date="" data-date-format="DD MMMM YYYY" value="2015-08-09">

剩下的是一些CSS和JS： http : //jsfiddle.net/g7mvaosL/

它适用于台式机上的Chrome和iOS上的Safari（特别理想，因为触摸屏上的本地date操纵器是无与伦比的恕我直言）。 没有检查其他人，但不要指望在任何Webkit上失败。

我相信浏览器将使用本地date格式。 不要认为有可能改变。 你当然可以使用自定义dateselect器。

经过许多障碍后，我想出了一个可以改变格式的解决scheme。 有一些注意事项，但是如果您希望一直显示“Jan”或“01”，则可以使用。 它仅适用于Windows和Mac上的Chrome，因为Firefox尚不支持本机dateselect器。

https://github.com/northamerican/custom-input-date-format

JS： 

 function updateDateInputs() { $('input').each(function() { var $date = $(this), date = $date.val().split('-'), format = ['year', 'month', 'day']; $.each(format, function(i, v) { $date.attr('data-' + v, +date[i]); }); }); }

上海社会科学院： 

 $months: '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'; @each $month in $months { $i: index($months, $month); input[data-month="#{$i}"][data-style="reg"]::-webkit-datetime-edit-month-field:after { content: "#{$month}"; } }

Google Chrome在最后一个testing版中最终使用inputtype=date ，格式为DD-MM-YYYY 。

所以必须有办法强制一个特定的格式。 我正在开发一个HTML5网页，datesearch现在失败，格式不同。

如上所述， <input type=date ... >在大多数浏览器中都没有完全实现，所以我们来讨论webkit浏览器（chrome）。

使用Linux，你可以通过改变环境variablesLANG来改变它， LC_TIME似乎不起作用（至less对我来说）。

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

例如：使用： 

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

date显示为mm/dd/yyyy

使用： 

 LANG=pt_BR /opt/google/chrome/chrome

date显示为dd/mm/yyyy

您可以使用http://lh.2xlibre.net/locale/pt_BR/ （通过您的语言环境更改pt_BR ）来创build自己的自定义语言环境并根据需要设置date格式。

有关如何更改默认系统date的更好的更高级的参考是： https：//ccollins.wordpress.com/2009/01/06/how-to-change-date-formats-on-ubuntu/和https：// askubuntu。 COM /问题/ 21316 /何灿我-自定义-一个系统语言环境

您可以使用date查看当前的实际date格式： 

 $ date +%x 01-06-2015

但是LC_TIME和d_fmt似乎被chrome拒绝了（我认为这是webkit或chrome中的一个bug），可悲的是它不起作用 。 ：'（

所以，不幸的是，响应，IF LANG环境variables不解决你的问题，目前还没有办法。

如果你需要一个快速的解决scheme， 试试这个让yyyy-mm-dd去“dd- Sep -2016”

1）在你的input附近创build一个span类（作为标签）

2）每次更改用户的date，或需要从数据加载时更新标签。

适用于 IE11 +的webkit浏览器手机和指针事件需要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>

它不可能改变networking浏览器使用用户的电脑或手机的默认date格式。 但是，如果你可以使用jQuery和jQuery UI，那么就有一个可以devise的dateselect器，并且可以按照开发者的需求以任何格式显示。 链接到jquery uidateselect器是在这个页面http://jqueryui.com/datepicker/你可以find演示以及代码和文档或文档链接如果任何人想要进一步的帮助，他/她可以连接我的最好的社交networkinghttp://www.funnenjoy.com

编辑：我发现铬使用默认等于系统设置的语言设置，但用户可以改变它们，但开发人员不能迫使用户这样做，所以你必须使用其他JS解决scheme，如我告诉你可以使用像JavaScriptdateselect器或jQuerydateselect器

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

输出：

在这里输入图像描述 

 function dmy() { var mydate = document.getElementById('dat').value; //alert(mydate); var yf = mydate.split("-")[0]; var mf = mydate.split("-")[1]; var df = mydate.split("-")[2]; var b = localStorage.getItem("b"); if (!b) { b = []; } else { b = JSON.parse(b); } b.push({ df: df, mf: mf, yf: yf }); localStorage.setItem("b", JSON.stringify(b)); } function showdate() { var sdate = JSON.parse(localStorage.getItem('b')); var a = ''; if (sdate != null) { for (var i = 0; i < sdate.length; i++) { a += sdate[i]['df'] + '/' + sdate[i]['mf'] + '/' + sdate[i]['yf'] + '<br>'; } } else { a = 'No DATA'; } document.getElementById('conversion').innerHTML = a; } 
 <form onsubmit=dmy()> <input type="date" name="dat" id="dat"> <input type="submit" value="submit"> </form> <input type="button" value="convert" onclick=showdate()> <div id="conversion"></div>

HTML5dateselect器的格式取决于服务器机器date时间格式的格式。

所以你可以通过在任务栏中更改部署服务器上的格式来更改它。

Interesting Posts