jQuery：如何從 HTML5 日期選擇器中獲取日期格式 mmddyyyy 格式

Question

我正在使用 HTML5 日期輸入標簽，根據日期選擇器，它采用mm/dd/yyyy格式，但是在從日期輸入字段中檢索日期時，我得到了yyyy-mm-dd格式。 有什么辦法可以得到“ mm/dd/yyyy ”？ 請給我建議。 這是示例代碼，

 $(document).ready(function(){ $("#idButton").on('click', function(){ var fromDate = $("#fromEffectiveDate").val(); console.log(fromDate); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="date" id="fromEffectiveDate" /> <input type="button" id="idButton" value="GetDate" />

Answer 1

您可以使用.split("-").reverse().join("/")拆分日期，然后反轉該數組，最后加入它以獲得dd/mm/yyyy格式。

演示代碼：

 $(document).ready(function() { $("#idButton").on('click', function() { var fromDate = $("#fromEffectiveDate").val().split("-").reverse().join("/"); console.log(fromDate); }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="date" id="fromEffectiveDate" /> <input type="button" id="idButton" value="GetDate" />

Answer 2

為了獲得最佳的瀏覽器兼容性，我建議使用jQuery 日期選擇器插件而不是 HTML5 日期輸入。

它支持dateFormat選項

$( "#fromEffectiveDate" ).datepicker({
  dateFormat: "mm/dd/yy"
});

該建議基於以下事實

• 你已經有jQuery
• Safari 和 IE 不支持HTML5 日期輸入
• 甚至MDN 都建議使用 jQuery 日期選擇器插件

目前，以跨瀏覽器方式處理 forms 中日期的最佳方法是讓用戶在單獨的控件中輸入日、月和年，或者使用 JavaScript 庫，例如ZF590B4FDA2C30BE28DD3C8C3CAF5C 日期選擇器

Answer 3

帶有valueAsDate的 vanilla js 解決方案

 function test(){ let date = document.getElementById('fromEffectiveDate').valueAsDate; console.log(`${date.getFullYear()}-${date.getMonth()+1}-${date.getDate()}`); }

 <input type="date" id="fromEffectiveDate" > <input type="button" id="idButton" value="GetDate" onclick="test()">

Answer 4

您可以使用該屬性：

valueAsDate ：日期 object：返回/設置元素的值，解釋為日期，如果無法轉換，則返回 null。

獲取日期值后，您可以使用.toLocaleDateString()將其轉換為所需的格式：

 $("#idButton").on('click', function(){ var fromDate = $("#fromEffectiveDate")[0].valueAsDate; var options = { year: 'numeric', month: '2-digit', day: '2-digit' }; var dateFormatted = fromDate.toLocaleDateString("en-US", options); console.log(dateFormatted); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="date" id="fromEffectiveDate" /> <input type="button" id="idButton" value="GetDate" />