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

问题描述 投票：97回答：16

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

html date input format
16个回答
10
投票

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

输出：

enter image description here

1
投票

这是解决方案：

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

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

希望这将解决问题:)

0
投票

清理实现，没有依赖关系。 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>
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。

0
投票

对于mm-dd-yyyy格式化

AA = date.split（ “ - ”）

日期= AA [1] + ' - ' + AA [2] + ' - ' + AA [0]

0
投票
<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>
-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或其他任何格式的日期格式化日期。

9
投票

你没有。

首先，您的问题含糊不清 - 您是指其向用户显示的格式，还是将其传输到Web服务器的格式？

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

如果您指的是传输到服务器的格式，那么您正试图解决错误的问题。您需要做的是编写服务器端代码以接受yyyy-mm-dd格式的日期。

5
投票

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

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

或者有传统的旧方式：

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

我想是这样，在HTML中没有DD-MM-YYYY格式的语法。请参阅此页http://www.java2s.com/Code/SQLServer/Date-Timezone/FormatdateMmmddyyyyhhmmdp.htm。它会对你有所帮助。否则使用javascript日期选择器。

1
投票

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

1
投票

为什么不直接使用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"/>
1
投票
$('input[type="date"]').change(function(){
   alert(this.value.split("-").reverse().join("-")); 
});
1
投票

我做了很多研究，我不认为可以强制<input type="date">的格式。浏览器选择本地格式，根据用户设置，如果用户的语言是英语，日期将显示为英文格式（mm / dd / yyyy）。

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

Jquery DatePicker似乎是一个很好的选择，因为你可以迫使localization，date format ......

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（）'的某些方法会产生意外结果。 （即 - 落后一天）

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.