在输入字段中使用 dd/mm/yyyy 输入日期格式答案

【问题标题】：Input date format with dd/mm/yyyy in the input field在输入字段中使用 dd/mm/yyyy 输入日期格式
【发布时间】：2023-04-03 04:45:01
【问题描述】：

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

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

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

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

另外请注意，这是 wordpress 主题中的所有自定义代码，所以我有 jquery 以及我的自定义 javascript 和 css。不能添加moment.js之类的库...

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

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

【问题讨论】：

嗨，请准备一把小提琴。以便我们轻松快速地解决您的问题。
@biswajit-rout 已添加
How to set date format in HTML date input tag?的可能重复
Is there any way to change input type="date" format?的可能重复
请参考我的回答stackoverflow.com/a/50546315/1421196

标签： javascript jquery date

【解决方案1】：

将只读属性添加到您的 html 标记。这是限制用户输入。

<input type="text" name="dto" id="date_timepicker_end" readonly>

当您使用 jQuery 日期选择器时，它可以选择指定您想要的日期格式。

 $("#date_timepicker_end").datepicker()
 {
    "dateFormat" : "dd-mm-yyyy" //any valid format that you want to have
 });

希望这会有所帮助！

【讨论】：

【解决方案2】：

如您所知，您无法更改 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">

希望对你有帮助。

【讨论】：

【解决方案3】：

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

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

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

【讨论】：

【解决方案4】：

我想出了一个使用文本框来模拟日期输入并做任何你想要的格式的方法，这里是代码

<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。

【讨论】：