如何使用 jQuery 从 HTML <input type="date"> 中提取值

Posted 2023-02-25

【中文标题】如何使用 jQuery 从 HTML <input type="date"> 中提取值

【英文标题】：How to extract values from HTML <input type="date"> using jQuery

【发布时间】：2016-01-23 13:53:50

【问题描述】：

使用 html input type="date" 和提交按钮。我想用日期输入中的适当值填充变量 day、month 和 year。

<input type="date" id="date-input" required />
<button id="submit">Submit</button>

和 jQuery：

var day, month, year;

$('#submit').on('click', function()
  day = $('#date-input').getDate();
  month = $('#date-input').getMonth() + 1;
  year = $('#date-input').getFullYear();
  alert(day, month, year);
);

这是一个代码示例： https://jsfiddle.net/dkxy46ha/

控制台错误告诉我.getDate() 不是函数。

我看到过类似的问题，但解决方案对我不起作用。如何从input type="date" 中提取日期、月份和年份？谢谢

【问题讨论】：

value 是你需要创建 new Date 的字符串

【参考方案1】：

首先，您需要从 input 元素值创建一个 Date 对象。然后您将能够从该对象中获取日、月和年。

$('#submit').on('click', function()
  var date = new Date($('#date-input').val());
  var day = date.getDate();
  var month = date.getMonth() + 1;
  var year = date.getFullYear();
  alert([day, month, year].join('/'));
);

工作示例：https://jsfiddle.net/8poLtqvp/

【讨论】：

是的，这不起作用。如果减 +/- 1，则日期。如果向其添加 1，则有无效日期的风险。

使用 getUTCDate() 而不是 getDate()。月份和年份也是如此。

【参考方案2】：

JQuery 的优势？几行代码就大功告成了！！

alert 只接受一个字符串作为它的参数。 很简单，我们只需使用 String 内置函数将 Date 对象作为字符串传递。

只需用这个替换按钮标签...

<button onclick="alert(String( $("#date-input").val() ))">Submit</button>

您可以对字符串进行进一步操作，您将收到yyyy-mm-dd 的警报

【参考方案3】：

        <input type="date" id="date-input"/>
        <input type="submit" id="submit" value="submit"/>


<script>
      $('#submit').on('click', function()
              var date = new Date($('#date-input').val());
              var day = $('#date-input').getDate();
              var month = $('#date-input').getMonth() + 1;
              var year = $('#date-input').getFullYear();
              alert(day+"/"+ month+"/"+year);
            );
    </script>

日期类将输入数据转换为日期类型。然后 getMonth() 给我们从 0-11 的值，所以我们可以考虑一月 为 0 或者我们可以将收到的值加 1，这就是我在这里所做的。

这里我只是使用 Jquery 分别获取日期、月份和年份，如果你想发布数据，你可以将这些值转换为字符串。

【讨论】：

你应该总是解释你的代码是做什么的。以后也会对大家更有帮助

如果您能提供有关您如何达成此解决方案的详细信息，将对其他人有所帮助。

【参考方案4】：

input type="date" 返回的日期值格式为 yyyy-mm-dd 。可以使用 .split() 和参数 "-" 来检索包含 [yyyy, mm, dd] 的数组

注意，alert() 期望字符串作为参数；不打印与带有逗号 , 运算符的 console.log() 相同的值

var day, month, year;

$('#submit').on('click', function() 
  var date = $('#date-input').val().split("-");
    console.log(date, $('#date-input').val())
  day = date[2];
  month = date[1];
  year = date[0];
  alert(day + month + year);
);

jsfiddle https://jsfiddle.net/dkxy46ha/2/

【参考方案5】：

date = new Date($('#date-input').val())
date.getDate()

...

【讨论】：

这行不通。您需要获得输入的价值。然后才创建Date对象

date = new Date($('#date-input').val())