正文

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

 2023-02-25  171

关键词：

【中文标题】如何在 HTML 日期输入标签中设置日期格式？【英文标题】：How to set date format in HTML date input tag? 【发布时间】：2011-10-22 03:50:26 【问题描述】：

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

【问题讨论】：

这不是Specifying the value output of of an HTML5 input type = date? 的可能副本吗？我想说，this 问题 here 比那个老问题问得好，但是那个 older 有一个很好的答案。 Is there any way to change input type="date" format?的可能重复我的国家设置是荷兰语，在 Chrome 中显示 DD-MM-YYYY。似乎这取决于使用该网站的客户端的 Windows 设置。 【参考方案1】：

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

【讨论】：

【参考方案2】：

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

【讨论】：

【参考方案3】：

如果你使用 jQuery，这里有一个不错的简单方法

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

或者还有古老的传统方式：

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

【讨论】：

【参考方案4】：

日期值的格式为'YYYY-MM-DD'。看下面的例子

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

您只需将日期格式化为 php、asp、ruby 或其他任何格式即可。

【讨论】：

【参考方案5】：

我在 *** 上找到了相同的问题或相关问题

有没有办法改变输入类型=“日期”的格式？

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

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 代码：

#dttext-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;

输出：

【讨论】：

甚至更好 - 使用 css 在常规输入上放置一个透明的日期控件感谢您的回复，如果您有此链接或代码，我需要更新这是一个不错的选择。我认为他在问是否可以使用 HTML（基于问题），而不是 CSS 或 Javascript。【参考方案6】：

为什么不按原样使用 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"/>

【讨论】：

要求显然是，我引用 - “我需要 dd-mm-yyyy 格式。”这有什么帮助？不适用于 Firefox。此 html 显示带有占位符 mm/dd/yyyy 的输入。我的 windows 和 firefox 都设置为荷兰语作为第一语言。 Windows 区域设置显示短日期：30-11-2018。【参考方案7】：

干净的实现，没有依赖关系。 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>

【讨论】：

【参考方案8】：

$('input[type="date"]').change(function()
   alert(this.value.split("-").reverse().join("-")); 
);

【讨论】：

感谢您提供此代码 sn-p，它可能会提供一些即时帮助。一个正确的解释would greatly improve 其教育价值通过展示为什么这是一个很好的解决问题的方法，并将使它对未来有类似但不相同的问题的读者更有用。请edit您的答案添加解释，并说明适用的限制和假设。【参考方案9】：

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

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

Jquery DatePicker 似乎是一个不错的选择，因为您可以强制使用 localization、date format ...

【讨论】：

【参考方案10】：

简短的直接答案是没有或没有开箱即用，但我想出了一种方法来使用文本框和纯 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。

【讨论】：

【参考方案11】：

我想出的答案与我读过的上述任何内容略有不同。

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

输入接受的日期会生成格式为“yyyy-mm-dd”的字符串。我们可以将其拆分并正确放置为 new 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()”的某些方式会产生意想不到的结果。（即 - 落后一天）

【讨论】：

【参考方案12】：

mm-dd-yyyy 中的格式化：

 aa = date.split("-")

 date = aa[1]+'-'+aa[2]+'-'+aa[0]

【讨论】：

【参考方案13】：

这是一种选择。当用户输入日期时，该函数会重新格式化它。当他们单击提交按钮时，它会以您要查找的格式填充结果div。

<div id="result"></div>
<p>Enter some text:
<input type="date" name="txt" id="datefield" onchange="dateval(value)"></p>
<button onclick="postdate()">submit</button>

<script>
var a;

// Set the *value* of the input element to
// yyyy-mm-dd (text is unchanged)
function dateval(val) 
    var dv = document.getElementById("datefield");
    a = val.split("-").reverse().join("-");
    dv.type = "text";
    dv.value = a;


// Extract the yyyy-mm-dd value from the inpuut element,
// format it to dd-mm-yyyy and put it in the div
function postdate() 
    var dv = document.getElementById("datefield");
    var z = a.split("-").reverse().join("-");
    document.getElementById("result").innerHTML = a;
    dv.type = "date";
    dv.value = z;

</script>

【讨论】：

当您在此处发布 HTML 代码时，将其格式化为代码非常重要。如果您不这样做，它将被格式化为页面的一部分，并且您的答案看起来不像答案。如果你不知道如何格式化，there's a nice guide on it in the help center 这是一个创造性的解决方案，但它不是很防弹，并且在值恢复时有一些古怪的行为【参考方案14】：

解决方法如下：

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

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

希望这能解决问题:)

【讨论】：

您的解决方案没有使用日期类型的 HTML 输入，因此没有真正回答问题。您不需要将其类型设置为日期。对于 datepicker 它将在没有日期的情况下工作。试试吧，希望它能解决你的问题。【参考方案15】：

我们可以在javascript中使用split方法将这个yyyy-mm-dd格式改成dd-mm-yyyy。

let dateyear= "2020-03-18";
let arr = dateyear.split('-') //now we get array of these and we can made in any format as we want
let dateFormat = arr[2] + "-" + arr[1] + "-" + arr[0]  //In dd-mm-yyyy format

【讨论】：

如何在查询中设置 odbc 日期格式

】如何在查询中设置odbc日期格式【英文标题】：Hoetosetodbcdateformatinquery【发布时间】：2018-01-2308:38:13【问题描述】：我已从MsAccess数据库获取数据为PHPJSON格式。我在查询中有通过日期参数。数据库数据类型是日期/时间。查询mm/dd... 查看详情

猫鼬如何在模型中设置日期格式

】猫鼬如何在模型中设置日期格式【英文标题】：mongoosehowtosetdateformatinmodel【发布时间】：2015-08-1013:04:28【问题描述】：我是猫鼬的新手。我使用"Date"作为我的"holidayDate"列的类型。我只想在我的"holidayDate"列中存储日期而不是时... 查看详情

如何在与 SQL 的连接中设置日期格式？

】如何在与SQL的连接中设置日期格式？【英文标题】：HowtosetdateformatinaconnectiontoSQL?【发布时间】：2011-09-0501:21:42【问题描述】：在MicrosoftSQLServerManagementStudio中，调用存储过程后，我可以看到时间在表中有2011-05-2019:56:09的格式。... 查看详情

怎么在excel中设置自定义日期格式

...5、如图就是转换后的一种日期格式。扩展资料：excel表格如何合并单元格：1、第一步：打开excel表格，用鼠标左键点住拖选要合并的单元格（如下图）；2、第二步：对着拖选好的区域点击右键，在弹出的工具栏中点击“合并居... 查看详情

如何在 Oracle SQL Developer 中设置自定义日期时间格式？

】如何在OracleSQLDeveloper中设置自定义日期时间格式？【英文标题】：HowcanIsetacustomdatetimeformatinOracleSQLDeveloper?【发布时间】：2011-12-2909:18:42【问题描述】：默认情况下，OracleSQL开发人员将日期值显示为15-NOV-11。我想默认查看时间... 查看详情

用于在 Chrome 中设置 HTML5 日期输入日历样式的 CSS

】用于在Chrome中设置HTML5日期输入日历样式的CSS【英文标题】：CSSforstylingHTML5dateinputcalendarinChrome【发布时间】：2015-04-2813:46:19【问题描述】：如果单击html5日期输入上的向下箭头，是否可以设置弹出日历的样式？<form><labelf... 查看详情

如何在 django 的 SelectDateWidget 中设置默认日期

】如何在django的SelectDateWidget中设置默认日期【英文标题】：HowtosetdefaultdateinSelectDateWidgetindjango【发布时间】：2012-02-0107:21:39【问题描述】：我正在使用SelectDateWidget小部件在表单字段中输入日期。但我希望它默认显示当前日期。... 查看详情

如何在 BigQuery 中设置动态会计日期范围？

】如何在BigQuery中设置动态会计日期范围？【英文标题】：HowcanIhaveDynamicFiscalDateRangeinBigQuery?【发布时间】：2018-06-1805:01:50【问题描述】：请建议我如何在BigQuery中动态更改日期范围。例如，2017财年（4-5-4日历）有371天，而2018财... 查看详情

在输入类型 date 中设置日期

】在输入类型date中设置日期【英文标题】：Setdateininputtypedate【发布时间】：2012-09-0300:09:11【问题描述】：我将在Chrome中的datepicker输入typedate中设置今天的日期。$(document).ready(function()letnow=newDate();lettoday=now.getDate()+\'/\'+(now.getMonth(... 查看详情

如何在asp.net core razor pages 2.2中设置日期格式和文化

】如何在asp.netcorerazorpages2.2中设置日期格式和文化【英文标题】：Howtosetdateformatsandcultureinasp.netcorerazorpages2.2【发布时间】：2019-06-2507:33:16【问题描述】：我正在使用Asp.NetCore2.2RazorPages应用程序。我想在应用程序级别设置应用程... 查看详情

如何在vue js中设置默认日期

】如何在vuejs中设置默认日期【英文标题】：howtosetthedefaultdateofthedayinvuejs【发布时间】：2018-11-1603:54:58【问题描述】：我想在我的日期选择器中默认设置日期。代码：<templatelang="html"><inputtype="date"v-model="date"></template>... 查看详情

如何在linq中设置日期格式“yyyy-MM-dd hh:mm”？

】如何在linq中设置日期格式“yyyy-MM-ddhh:mm”？【英文标题】：Howtosetdateformat"yyyy-MM-ddhh:mm"inlinq?【发布时间】：2016-03-1611:15:57【问题描述】：这是我的代码：varqry=(fromuin_db.ApplicationUsersselectnewUserBroadcastDTO()UserId=u.Id,DateCreated... 查看详情

如何在 HTML 的输入标签中设置默认值“on”？

】如何在HTML的输入标签中设置默认值“on”？【英文标题】：Howtosetthedefaultvalue"on"ininputtaginHTML?【发布时间】：2017-09-2506:45:57【问题描述】：我在html中使用了html输入标签类型复选框。然后我在javascript中获取输入标签的值... 查看详情

如何在物化日期选择器中设置日期

】如何在物化日期选择器中设置日期【英文标题】：Howtosetthedateinmaterializedatepicker【发布时间】：2015-07-3105:13:43【问题描述】：我正在使用materializecss.com日期选择器。当我尝试用jquery设置日期时，日期没有设置。这是我的代码：-... 查看详情

在 Thymeleaf 日期输入中设置 th:value？

】在Thymeleaf日期输入中设置th:value？【英文标题】：Setth:valueinThymeleafdateinput?【发布时间】：2018-12-1812:26:16【问题描述】：我使用Thymeleaf，我想在用户编辑之前向用户显示现有日期值，并且如果他们不想编辑它，他们可以保持原... 查看详情

在角度 JS 中设置日期格式

】在角度JS中设置日期格式【英文标题】：SetDateFormatinangularJS【发布时间】：2019-07-0813:46:12【问题描述】：我已经使用Angular实现了一个数据表。现在我想要的是，我想将日期格式设置为dd-MM-yyyy我尝试如下<td>mp.VFRDATE|date:\'dd-M... 查看详情

在日期字段中设置日期将其设置为前一天[重复]

】在日期字段中设置日期将其设置为前一天[重复]【英文标题】：Settingthedateindatefieldsetsitwithonedaybefore[duplicate]【发布时间】：2016-01-0311:48:45【问题描述】：我正在使用日期输入类型从HTML表单中显示/获取日期：<inputtype="date">... 查看详情

如何在 multiDatesPicker 中设置选定的日期

】如何在multiDatesPicker中设置选定的日期【英文标题】：HowtosetselecteddatesinmultiDatesPicker【发布时间】：2018-11-1115:59:20【问题描述】：我想使用php脚本在multiDatesPicker中设置选定的日期，这是来自数据库的逗号分隔值。例如，此列“... 查看详情