jQuery：如何从 HTML5 日期选择器中获取日期格式 mmddyyyy 格式答案

【问题标题】：jQuery: How to get the date format mmddyyyy format from the HTML5 datepickerjQuery：如何从 HTML5 日期选择器中获取日期格式 mmddyyyy 格式
【发布时间】：2021-01-17 14:16:28
【问题描述】：

我正在使用 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" />

【问题讨论】：

你可以使用valueasdate

标签： javascript jquery date

【解决方案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" />

【讨论】：

【解决方案2】：

为了获得最佳的浏览器兼容性，我建议使用 jQuery date picker 插件而不是 HTML5 日期输入。

支持dateFormat选项

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

该建议基于以下事实

你已经有jQuery
在 Safari 和 IE 中 HTML5 日期输入为 unsupported
甚至MDN suggests 使用jQuery 日期选择器插件

目前，以跨浏览器方式处理表单中日期的最佳方法是让用户在单独的控件中输入日、月和年，或者使用 JavaScript 库，例如 jQuery date picker .

【讨论】：

【解决方案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()">

【讨论】：

【解决方案4】：

您可以使用该属性：

valueAsDate：日期对象：返回/设置元素，解释为日期，如果无法转换，则为 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" />

【讨论】：