在输入字段中输入带有 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 /年年。

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

原文由 IkePr 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

如您所知，您无法更改 input type="date" 中的值格式。

input type="date" 使用本地化显示格式，

但其值的格式如下：“YYYY-MM-DD”。

（文档： https ://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date）

而不是尝试在 input 的 datepicker --- 上修改或使用模式，

我尝试使用常规 input type="date" datepicker 工作。

datepicker 有一个 dateFormat 选项。

似乎“yy-mm-dd”符合 input type="date" 要求的格式。

使用它，我最终以一种简单的方式得到了一个本地化的 datepicker ：

 // Use datepicker on the date inputs
$("input[type=date]").datepicker({
  dateFormat: 'yy-mm-dd',
  onSelect: function(dateText, inst) {
    $(inst).val(dateText); // Write the value in the input
  }
});

// Code below to avoid the classic date-picker
$("input[type=date]").on('click', function() {
  return false;
});

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

<input type="date">

希望能帮助到你。

原文由 Takit Isy 发布，翻译遵循 CC BY-SA 4.0 许可协议