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

Question

使用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"中提取日、月和年？谢谢。

- jmancherje

---

值是字符串，您需要从中创建“新日期”。 - charlietfl

Answer 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/

- Yuriy Yakym

---

好的，这不起作用。日期偏差为±1。如果你加1，你就有可能得到无效的日期。 - Belmiris

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

Answer 2

返回的日期值格式为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 {{链接1：https://jsfiddle.net/dkxy46ha/2/}}

- guest271314

Answer 3

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

...

- Oleg Sklyar

---

它不会起作用。您需要获取输入值。然后才能创建“日期”对象。 - Yuriy Yakym

date = new Date($('#date-input').val()) 日期 = 新日期($('#date-input').val()) - Yuriy Yakym

Answer 4

        <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>

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

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

- Pramod Gupta

---

你应该总是解释你的代码是做什么的。这对每个人，包括将来的人来说都更有帮助。 - DaFois

如果您能提供您是如何得出这个解决方案的细节，那么对其他人会很有帮助。 - Prasanth K C

Answer 5

JQuery的优势？几行代码就能实现许多操作！！

alert只接受字符串作为参数。因此，我们只需使用内置函数String将日期对象作为字符串传递即可。

只需使用以下代码替换按钮标签...

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

你可以对将要弹出的字符串进行进一步操作，其格式为yyyy-mm-dd

- user11930475