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

sc4hvdpw 于 2023-01-25 发布在 jQuery

关注(0)|答案(6)|浏览(128)

我有一个经典的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/

jquery

来源：https://stackoverflow.com/questions/50545478/input-date-format-with-dd-mm-yyyy-in-the-input-field

6条答案

按热度按时间

qcuzuvrc1#

正如您已经知道的，您不能更改input type="date"中的值格式。
input type="date"采用本地化显示格式，
但其值的格式如下："年-月-日"
(Doc：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date）
与其尝试修改或使用datepicker的input上的模式，
我尝试使用常规的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">

希望有帮助。

赞(0）回复(0）举报 2023-01-25

vsdwdz232#

在你的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
 });

希望这有帮助！！

赞(0）回复(0）举报 2023-01-25

zte4gxcn3#

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

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

这将不允许用户输入超过4个字符的年份字段。而且，这并不真正重要，他们输入虽然，你总是可以执行客户端-服务器端验证。

赞(0）回复(0）举报 2023-01-25

iqjalb3h4#

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

<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-在第二个功能上，您可以使用任何格式代替日+”/“+月+”/“+年，例如年+”/“+月+”/“+日，并在文本输入中使用占位符或值，如yyyy / mm / dd，以便用户在页面加载时使用。

赞(0）回复(0）举报 2023-01-25

8ftvxx2r5#

我创建了一个返回类型为have的函数，并传递了日期值以获得所需的日期格式

var date_picker_end = document.getElementById("date_picker_end").value;
      console.log("Date is:" + changedateformat(date_picker_end));


    function changedateformat(val) {
        const myArray = val.split("-");

        let year = myArray[0];
        let month = myArray[1];
        let day = myArray[2];

        let formatteddate = day + "-" + month + "-" + year; 
        return formatteddate;
    }

赞(0）回复(0）举报 2023-01-25

3htmauhk6#

看起来我有点晚了，但是我最近也遇到了类似的问题。在我的例子中，我得到的日期是yyyy-mm-dd格式，而我希望它是dd/mm/yyyy格式。所以，我使用了JS数组方法split。然后在一个新变量中，我得到了我需要的格式。

let dateWeGet='2000-11-21'

let changeFormat=()=>{
let dateArray=dateWeGet.split('-')

let newFormat=`${dateArray[1]}/${dateArray[2]}/${dateArray[0]}`
// mm/dd/yyyy

let newFormat2=`${dateArray[2]}/${dateArray[1]}/${dateArray[0]}`
//  dd/mm/yyyy

let newFormat3=`${dateArray[1]}-${dateArray[2]}-${dateArray[0]}`
//  dd-mm-yyyy

console.log(newFormat)
console.log(newFormat2)
console.log(newFormat3)
}

changeFormat()

注意，我不知道如何准确地添加代码片段，因为这是我第一次回答问题。这就是为什么我编写了一个JS代码片段，在其中我取了一个假设的日期。同时，我们可以使用ReactJS中的States * 或vanilla JS中的document.getElementById（）**来获取真实的的日期值。但函数将保持原样。
现在使用这个函数，我们可以创建任何我们想要的格式。

赞(0）回复(0）举报 2023-01-25

我来回答

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

6条答案

相关问题

热门标签

最新问答