有没有办法改变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_TIMEd_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