自帖子活跃2个月前。所以我想也给大家一些建议

在我的情况下，我从读卡器收到的日期是dd/mm/yyyy格式。

我所做的。 如。

Var d="16/09/2019" //收到卡片的日期 函数filldate () { . getelementbyid (cardexpirydate) value = d.split(“/”).reverse () . join(“-”); ｝ <input type="date" id="cardexpirydate"> <br /><br /> <input type="button" value="填写日期" onclick="filldate();" >

代码的作用:

它根据“/”将我得到的日期分割为dd/mm/yyyy(使用split())，并创建一个数组， 然后它反转数组(使用reverse())，因为日期输入支持反转 我所得到的。 然后，它将(使用join())数组连接到一个字符串，根据 输入字段要求的格式

所有这些都在一行中完成。

我想这会对一些人有所帮助，所以我写了这个。

自从这个问题被提出后，web领域发生了很多事情，其中最令人兴奋的是web组件的登陆。现在，您可以使用定制的HTML5元素优雅地解决这个问题，以满足您的需求。如果你想覆盖/改变任何html标签的工作方式，只需使用shadow dom构建你的。

好消息是，已经有很多可用的样板文件，所以很可能你不需要从头开始想出一个解决方案。看看人们在做什么，然后从中获得灵感。

你可以从一个简单(有效)的解决方案开始，比如聚合物的datetime-input，它允许你使用这样的标签:

 <date-input date="{{date}}" timezone="[[timezone]]"></date-input>

或者您可以获得创意和弹出完整的日期选择器样式，如您所希望的，与格式和区域设置，回调，和您的长选项列表(您有一个完整的自定义API在您的处置!)

符合标准，没有黑客。

仔细检查可用的插件，它们支持哪些浏览器/版本，以及它是否覆盖了足够百分比的用户基础……现在是2018年，所以它肯定会覆盖你的大部分用户。

希望能有所帮助!

我找到了一种改变格式的方法，这是一个棘手的方法，我只是用CSS代码改变了日期输入字段的外观。

input[type="date"]::-webkit-datetime-edit, input[type="date"]::-webkit-inner-spin-button, input[type="date"]::-webkit-clear-button { color: #fff; position: relative; } input[type="date"]::-webkit-datetime-edit-year-field{ position: absolute !important; border-left:1px solid #8c8c8c; padding: 2px; color:#000; left: 56px; } input[type="date"]::-webkit-datetime-edit-month-field{ position: absolute !important; border-left:1px solid #8c8c8c; padding: 2px; color:#000; left: 26px; } input[type="date"]::-webkit-datetime-edit-day-field{ position: absolute !important; color:#000; padding: 2px; left: 4px; } <input type="date" value="2019-12-07">

我调整了米格尔的代码，让它更容易理解 我想和像我一样有问题的人分享。

试试这个简单快捷的方法

$("#datePicker").on("change", function(e) { displayDateFormat($(this), '#datePickerLbl', $(this).val()); }); function displayDateFormat(thisElement, datePickerLblId, dateValue) { $(thisElement).css("color", "rgba(0,0,0,0)") .siblings(`${datePickerLblId}`) .css({ position: "absolute", left: "10px", top: "3px", width: $(this).width() }) .text(dateValue.length == 0 ? "" : (`${getDateFormat(new Date(dateValue))}`)); } function getDateFormat(dateValue) { let d = new Date(dateValue); // this pattern dd/mm/yyyy // you can set pattern you need let dstring = `${("0" + d.getDate()).slice(-2)}/${("0" + (d.getMonth() + 1)).slice(-2)}/${d.getFullYear()}`; return dstring; } .date-selector { position: relative; } .date-selector>input[type=date] { text-indent: -500px; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="date-selector"> <input id="datePicker" class="form-control" type="date" onkeydown="return false" /> <span id="datePickerLbl" style="pointer-events: none;"></span> </div>

区分两种不同的格式很重要:

The RFC 3339/ISO 8601 "wire format": YYYY-MM-DD. According to the HTML5 specification, this is the format that must be used for the input's value upon form submission or when requested via the DOM API. It is locale and region independent. The format displayed by the user interface control and accepted as user input. Browser vendors are encouraged to follow the user's preferences selection. For example, on Mac OS with the region "United States" selected in the Language & Text preferences pane, Chrome 20 uses the format "m/d/yy".

HTML5规范不包括任何覆盖或手动指定这两种格式的方法。

const birthday = document.getElementById("birthday"); const button = document.getElementById("wishBtn"); 按钮。addEventListener("click"， () => { let dateValue = birthday.value; //改变格式:) dateValue = dateValue.split(“-”).reverse () . join(“-”); alert('生日快乐的国王/皇后${dateValue} '); })； <input type="date" id="birthday" name="birthday" value="2022-10-10"/> <button id="wishBtn">点击我</button>