默认情况下,输入type="date"显示日期为YYYY-MM-DD。

问题是,是否可能将其格式强制为:DD-MM-YYYY?


当前回答

这是不可能改变web-kit浏览器使用用户的电脑或手机的默认日期格式。 但是如果你可以使用jquery和jquery UI,有一个日期选择器是可设计的,可以显示在任何格式的开发人员想要的。 jquery UI日期选择器的链接是 在这个页面http://jqueryui.com/datepicker/上,您可以找到演示以及代码和文档或文档链接

编辑:-我发现chrome使用的语言设置默认等于系统设置,但用户可以改变他们,但开发人员不能强迫用户这样做,所以你必须使用其他js解决方案,就像我告诉你可以搜索网页查询像javascript日期选择器或jquery日期选择器

其他回答

谷歌Chrome在最近的测试版中最终使用了输入type=date,格式为DD-MM-YYYY。

因此,必须有一种方法来强制使用特定的格式。我正在开发一个HTML5网页,日期搜索现在失败与不同的格式。

如果你需要一个快速的解决方案,可以试试这个方法,让yyyy-mm-dd变成“dd- september -2016”

1)在您的输入附近创建一个span类(充当标签)

2)每次用户更改日期或需要从数据中加载时更新标签。

工作的webkit浏览器移动和指针事件的IE11+需要jQuery和jQuery日期

$("#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>

在阅读了大量的讨论之后,我准备了一个简单的解决方案,但我不想使用大量的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;
}

输出:

自从这个问题被提出后,web领域发生了很多事情,其中最令人兴奋的是web组件的登陆。现在,您可以使用定制的HTML5元素优雅地解决这个问题,以满足您的需求。如果你想覆盖/改变任何html标签的工作方式,只需使用shadow dom构建你的。

好消息是,已经有很多可用的样板文件,所以很可能你不需要从头开始想出一个解决方案。看看人们在做什么,然后从中获得灵感。

你可以从一个简单(有效)的解决方案开始,比如聚合物的datetime-input,它允许你使用这样的标签:

 <date-input date="{{date}}" timezone="[[timezone]]"></date-input>

或者您可以获得创意和弹出完整的日期选择器样式,如您所希望的,与格式和区域设置,回调,和您的长选项列表(您有一个完整的自定义API在您的处置!)

符合标准,没有黑客。

仔细检查可用的插件,它们支持哪些浏览器/版本,以及它是否覆盖了足够百分比的用户基础……现在是2018年,所以它肯定会覆盖你的大部分用户。

希望能有所帮助!

自帖子活跃2个月前。所以我想也给大家一些建议

在我的情况下,我从读卡器收到的日期是dd/mm/yyyy格式。

我所做的。 如。

Var d="16/09/2019" //收到卡片的日期 函数filldate () { . getelementbyid (cardexpirydate) value = d.split(“/”).reverse () . join(“-”); } <input type="date" id="cardexpirydate"> <br /><br /> <input type="button" value="填写日期" onclick="filldate();" >

代码的作用:

它根据“/”将我得到的日期分割为dd/mm/yyyy(使用split()),并创建一个数组, 然后它反转数组(使用reverse()),因为日期输入支持反转 我所得到的。 然后,它将(使用join())数组连接到一个字符串,根据 输入字段要求的格式

所有这些都在一行中完成。

我想这会对一些人有所帮助,所以我写了这个。