如何在HTML日期输入标签中设置日期格式？

105

我想知道是否可以在html <input type="date"></input>标记中设置日期格式...当前为yyyy-mm-dd，而我需要采用dd-mm-yyyy格式。

html  date  input  format 
— 皮特
source
3
指定HTML5输入类型的值输出=日期是否可能重复？？我会说，这个问题在这里更好地问比旧的一个，但旧的一个具有相当不错的答案。
— 2011年
— Vaibhav Mule
我的国家/地区设置为荷兰语，在Chrome中显示DD-MM-YYYY。似乎取决于使用该网站的客户端的Windows设置。
— dark_passages

Answers:

11

你不知道

首先，您的问题是模棱两可的-您是指将其显示给用户的格式，还是将其传输给Web服务器的格式？

如果您指的是显示给用户的格式，那么这取决于最终用户界面，而不是您在HTML中指定的任何内容。通常，我希望它基于在操作系统区域设置中设置的日期格式。尝试使用您自己的首选格式来覆盖它是没有任何意义的，因为它显示的格式（通常来说）是针对用户所在区域的正确格式，以及用户用来书写/理解日期的格式。

如果您是指将其传输到服务器的格式，那么您正在尝试解决错误的问题。您需要对服务器端代码进行编程，以接受yyyy-mm-dd格式的日期。

— 斯图尔特
source
不幸的是，您的第二条评论在现实世界中并不完全正确。某些浏览器（例如Chrome和Opera）至少遵守实体的顺序，尽管仅此而已。例如，我的OS语言环境设置指定为短日期，今年八月的第一天应该是2016年1月8日，但即使Chrome和Opera也会显示01/08/2016。其他浏览器，例如Safari和Firefox（至少在OS X上），完全忽略了操作系统设置，无论如何始终显示2016-08-16。在用户可以设置自己的日期首选项的网站上，覆盖它当然很有意义。
— Janus Bahs Jacquet
（忽略有关Firefox和Safari的注释……我很累。这两个浏览器都不支持日期类型，因此它们只是显示该值的基础格式，在我当前的代码中为YYYY-MM-DD 。）
— Janus Bahs Jacquet 2016年
是否大多数人都在问如何更改显示/输入日期格式，以使用户能够设置自己的首选项或在世界上施加自己的首选日期格式？正如我已经说过的那样，后者是任何人都不应做的事情，但是您可以对前者是否合适进行任何争论。但这将是一个表示性的设置，因此不在HTML的范围之内。
— 斯图尔特
问题在于这是无法设置的演示设置。演示文稿设置通常属于CSS，但无法在CSS（或其他任何地方）进行更改。此外，甚至HTML规范本身也并非没有外观设置。例如，上一节input[type=password]说：“用户代理应遮盖该值，以使除用户之外的其他人看不到它”，这与说用户代理应以某种方式显示日期一样多。
— Janus Bahs Jacquet 2016年
1
有些人会说这是一个好东西，它不能被设置，因为它可以防止网站管理员从造成对世界自己喜欢的日期格式。但是密码输入让我开始思考。在很多地方，HTML规范确实提供了表达建议，这些建议本质上是针对浏览器默认样式表的建议。此处的区别在于，此特定表示方面似乎没有CSS属性。
— 斯图尔特
11

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

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

我找到了一个简单的解决方案，您不能给出具体的格式，但可以像这样自定义。

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

输出：

在此处输入图片说明

— 阿希什·巴特
source
甚至更好-使用CSS在常规输入上放置透明的日期控件
— George Mauer
感谢您的答复，如果您对此有任何链接或代码，我需要更新
— ashish bhatt 2015年
这是一个很好的选择。
— 狄龙·伯纳特
我认为他在问HTML是否可行（基于问题），而不是CSS或Javascript。
— Shizukura
6

如果您使用的是jQuery，这是一个不错的简单方法

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

还是有旧的传统方式：

document.getElementById("dateField").value = new Date().toISOString().substring(0, 10)
— 肖恩·博伊尔
source
4

为什么不按原样使用html5日期控件以及其他属性，使其可以在支持日期类型的浏览器上正常运行，并且仍然可以在尚未支持日期类型的其他浏览器（如firefox）上运行

<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"/>
— 保罗·IE
source
<pre> <input type =“ text” name =“ input1”占位符=“ YYYY-MM-DD”必需的样式=“ [0-9] {4}-[0-9] {2}-[0-9 ] {2}“ title =”在此formart YYYY-MM-DD“ /> </ pre>中输入日期
— Paul IE
8
我引用的要求显然是：“我需要dd-mm-yyyy格式。” 这有什么帮助？
— HarijsKrūtainis16年
1
不适用于Firefox。此html显示带有占位符mm / dd / yyyy的输入。我的窗户和Firefox都以荷兰语为第一语言。Windows区域设置显示短日期：30-11-2018。
— 罗兰
1

我不确定这一点，但是我认为这应该由浏览器根据用户的日期/时间设置来处理。尝试将计算机设置为以该格式显示日期。

— 语法错误
source
1 
$('input[type="date"]').change(function(){
   alert(this.value.split("-").reverse().join("-")); 
});
— Dheeraj Rao
source
3
感谢您提供此代码段，它可能会立即提供帮助。通过说明为什么这是一个解决问题的好方法，适当的解释将大大提高其教育价值，并且对于将来有相似但不相同的问题的读者来说，它的作用更大。请编辑您的答案以添加说明，并指出适用的限制和假设。
— Toby Speight
1

我进行了许多研究，但我认为没有人可以强制采用这种格式<input type="date">。浏览器选择本地格式，然后根据用户设置，如果用户的语言为英语，则日期将以英语格式（mm / dd / yyyy）显示。

我认为，最好的解决方案是使用插件来控制显示。

jQuery DatePicker似乎是一个不错的选择，因为您可以强制进行本地化，日期格式 ...

— 菲菲
source
1

我想出的答案与上面所读的内容略有不同。

我的解决方案使用少量的JavaScript和html输入。

输入接受的日期将导致字符串格式为“ yyyy-mm-dd”。我们可以拆分它并将其正确放置为新的Date（）。

这是基本的HTML：

<form id="userForm">
    <input type="text" placeholder="1, 2, 3, 4, 5, 6" id="userNumbers" />
    <input type="date" id="userDate" />
    <input type="submit" value="Track" />
</form>

这是基本的JS：

let userDate = document.getElementById('userDate').value.split('-'),
    parsedDate = new Date((`${userDate[1]}-${userDate[2]}-${userDate[0]}`));

您可以按照自己喜欢的方式格式化日期。您可以创建一个新的Date（）并从那里获取所有信息...或直接使用'userDate []'构建您的字符串。

请记住，在“ new Date（）”中输入日期的某些方式会产生意外的结果。（即-落后一天）

— thielr7
source
1 
<html>

    <body>
        <p id="result">result</p>Enter some text: <input type="date" name="txt" id="value" onchange="myFunction(value)">
        <button onclick="f()">submit</button>
        <script>
            var a;

            function myFunction(val){
                a = val.split("-").reverse().join("-");
                document.getElementById("value").type = "text";
                document.getElementById("value").value = a;
            }

            function f(){
                document.getElementById("result").innerHTML = a;
                var z = a.split("-").reverse().join("-");
                document.getElementById("value").type = "date";
                document.getElementById("value").value = z;
            }

        </script>
    </body>

</html>
— 达达德里宫
source
2
在此处发布HTML代码时，将其格式化为代码非常重要。如果您不这样做，则将其格式化为页面的一部分，并且您的答案看起来并不像答案。如果您不知道如何格式化，则可以在帮助中心找到很好的指南
— Zoe
0

简短的直接答案是是否开箱即用，但我想出了一种使用文本框和纯JS代码模拟日期输入并执行您想要的任何格式的方法，这是代码 

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

— 阴凉
source
-1

干净的实现没有依赖性。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>
— 詹姆斯·佩里
source
-2

解决方法如下： 

  <input type="text" id="end_dt"/>

$(document).ready(function () {
    $("#end_dt").datepicker({ dateFormat: "MM/dd/yyyy" });
});

希望这可以解决问题:)

— 穆罕默德·瓦卡斯（Muhammad Waqas）
source
1
您的解决方案没有利用日期类型的HTML输入，因此无法真正回答问题。
— 文森特
您无需将其类型设置为日期。对于日期选择器，它将不带日期运行。尝试一下，希望它可以解决您的问题。
— 穆罕默德·瓦卡斯
-3

日期值的格式为'YYYY-MM-DD'。请参阅以下示例

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

您需要做的就是用php，asp，ruby或其他格式格式化日期。

— 查米
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.