如何在HTMLdateinput标签中设置date格式?

我想知道是否有可能在html <input type="date"></input>标签中设置date格式…目前它是yyyy-mm-dd,而我需要在dd-mm- yyyy格式。

如果只使用HTML,我认为没有解决scheme
我想你应该使用jQuery
适合的jquery插件是jQuery Masked Input

你没有。

首先,你的问题是不明确的 – 你的意思是它向用户显示的格式,或者它被传送到networking服务器的格式?

如果你的意思是它向用户显示的格式,那么这就是最终用户界面,而不是你在HTML中指定的任何东西。 通常,我希望它是基于在操作系统区域设置中设置的date格式。 尝试用自己喜欢的格式覆盖它是没有意义的,因为它显示的格式(一般而言)是用户的语言环境的正确格式,以及用户用来编写/理解date的格式。

如果您的意思是将其传输到服务器的格式,则您正试图修复错误的问题。 你需要做的是编程服务器端代码接受date格式为yyyy-mm-dd。

我发现在stackoverflow相同的问题或相关的问题

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

我发现一个简单的解决scheme,你不能给微粒格式,但你可以自定义这样的。

HTML代码:

  <body> <input type="date" id="dt" onchange="mydate1();" hidden/> <input type="text" id="ndt" onclick="mydate();" hidden /> <input type="button" Value="Date" onclick="mydate();" /> </body> 

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; } 

输出:

在这里输入图像描述

如果你使用jQuery,这是一个很好的简单方法

 $("#dateField").val(new Date().toISOString().substring(0, 10)); 

或者有传统的传统方式:

 document.getElementById("dateField").value = new Date().toISOString().substring(0, 10) 

我认为,在HTML中没有DD-MM-YYYY格式的语法。 请参阅此页http://www.java2s.com/Code/SQLServer/Date-Timezone/FormatdateMmmddyyyyhhmmdp.htm 。 有点它会帮助你。 否则使用JavaScriptdateselect器。

我不知道这是肯定的,但我认为这应该由浏览器根据用户的date/时间设置来处理。 尝试设置您的计算机以该格式显示date。

为什么不按照原样使用html5date控件,其他属性可以在支持datetypes的浏览器上正常工作,并且仍然可以在Firefox等其他浏览器上工作,但仍然支持datetypes

 <input type="date" name="input1" placeholder="YYYY-MM-DD" required pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}" title="Enter a date in this formart YYYY-MM-DD"/> 

干净的实现没有依赖关系。 https://jsfiddle.net/h3hqydxa/1/

  <style type="text/css"> .dateField { width: 150px; height: 32px; border: none; position: absolute; top: 32px; left: 32px; opacity: 0.5; font-size: 12px; font-weight: 300; font-family: Arial; opacity: 0; } .fakeDateField { width: 100px; /* less, so we don't intercept click on browser chrome for date picker. could also change this at runtime */ height: 32px; /* same as above */ border: none; position: absolute; /* position overtop the date field */ top: 32px; left: 32px; display: visible; font-size: 12px; /* same as above */ font-weight: 300; /* same as above */ font-family: Arial; /* same as above */ line-height: 32px; /* for vertical centering */ } </style> <input class="dateField" id="dateField" type="date"></input> <div id="fakeDateField" class="fakeDateField"><em>(initial value)</em></div> <script> var dateField = document.getElementById("dateField"); var fakeDateField = document.getElementById("fakeDateField"); fakeDateField.addEventListener("click", function() { document.getElementById("dateField").focus(); }, false); dateField.addEventListener("focus", function() { fakeDateField.style.opacity = 0; dateField.style.opacity = 1; }); dateField.addEventListener("blur", function() { fakeDateField.style.opacity = 1; dateField.style.opacity = 0; }); dateField.addEventListener("change", function() { // this method could be replaced by momentJS stuff if (dateField.value.length < 1) { return; } var date = new Date(dateField.value); var day = date.getUTCDate(); var month = date.getUTCMonth() + 1; //zero-based month values fakeDateField.innerHTML = (month < 10 ? "0" : "") + month + " / " + day; }); </script> 
 $('input[type="date"]').change(function(){ alert(this.value.split("-").reverse().join("-")); }); 

实际上似乎没有人愿意支持它。 你是对的<input type="date"> 。 如果有人怀疑我。 http://www.w3schools.com/html/html5_form_input_types.asp

date值的格式是'YYYY-MM-DD' 。 看下面的例子

 <form> <input value="2015-11-30" name='birthdate' type='date' class="form-control" placeholder="Date de naissance"/> </form> 

所有你需要的是格式化date在PHP,ASP,ruby或任何具有该格式。