Question

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

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

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

我需要输入就像HTML输入，用户点击输入，只需根据他点击的内容更改值。我不希望他能够写任何随机数。

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

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

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

Answer 1

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

input type="date"使用本地化的显示格式，
但其值的格式如下：“YYYY-MM-DD”。
（文件：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date）

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

datepicker有一个datepicker选项似乎“yy-mm-dd”符合dateFormat所要求的格式使用它，我以一种简单的方式结束了本地化的input type="date"：

＆＃13;

datepicker

＆＃13;

// 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;
});

＆＃13;

希望它有所帮助。

Answer 2

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

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

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

Answer 3

将readonly属性添加到html标记中。这限制了用户输入输入。

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

当你正在使用jQuery datepicker时，它有可用的选项来指定你想要的日期格式。

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

希望这会有所帮助!!

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

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

4 个答案: