在输入字段中输入日期格式：dd/mm/yyyy

Question

我有一个经典的 HTML 日期输入：<input type="date" name="dto" id="date_timepicker_end">

现在我需要将此格式更改为dd/mm/yyyy，并且我知道我无法在 html 中更改它。

当我添加 jQuery 日期选择器时，我只得到一个空白输入表单，您可以在其中输入任何您想要的数字：

我需要输入像 HTML input 一样，用户单击输入，并且可以根据他单击的内容更改值。我不希望他能够写出任何随机数。

另请注意，这是 WordPress 主题中的所有自定义代码，因此我有 jquery 以及自定义的 javascript 和 css。我无法添加像 moment.js 之类的库......

这个问题的最佳解决方案是什么？我知道这个问题已经被问过很多次了，但是这些方法都不起作用，因为我需要输入字段像普通的 HTML 输入日期字段一样，而不是空输入，如果 mm/dd 则为 dd/mm/yyyy /yyyy。

jsfiddle： https: //jsfiddle.net/t4zrrvgL/

Answer 1

如您所知，您无法更改input type="date".

\n\n

使用input type="date"本地化显示格式，
\n但其值的格式如下：\xe2\x80\x9cYYYY-MM-DD\xe2\x80\x9d。
\n（文档：https ://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date ）

\n\n

\n我尝试使用常规input来处理datepicker，而不是尝试修改或使用 的模式。
input type="date"datepicker

\n\n

有datepicker一个dateFormat选择。
\n似乎 \xe2\x80\x9cyy-mm-dd\xe2\x80\x9d 与input type="date".
\n使用它，我最终datepicker以一种简单的方式进行了本地化：

\n\n

\r\n

\r\n

// Use datepicker on the date inputs\r\n$("input[type=date]").datepicker({\r\n  dateFormat: \'yy-mm-dd\',\r\n  onSelect: function(dateText, inst) {\r\n    $(inst).val(dateText); // Write the value in the input\r\n  }\r\n});\r\n\r\n// Code below to avoid the classic date-picker\r\n$("input[type=date]").on(\'click\', function() {\r\n  return false;\r\n});

\r\n

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">\r\n<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>\r\n<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>\r\n\r\n<input type="date">

\r\n

\r\n

\r\n

\n\n

希望能帮助到你。

\n

Answer 2

您可以将日期标签更改为：

<input type="date" id="myDate" max="2222-05-26">

这将不允许用户在年份字段中输入超过 4 个字符。此外，他们输入的内容并不重要，您始终可以执行客户端-服务器端验证。