日期输入不会控制台日志值

时间:2016-10-03 09:50:35

标签: javascript html-form

我正在尝试查看我的日期输入字段有什么值但是我在控制台中总是留空。

我使用以下JS来console.log我的日期输入值:

document.getElementById('date_of_birth').addEventListener('change', function() {
    console.log(this.getAttribute('value'));
});

这是我的输入字段:

<input id="date_of_birth" 
class="input input--bravo pad-1/2 span-1x field-date_of_birth is-invalid" 
data-palm="span-1x" 
placeholder="dd/mm/yyyy" 
pattern="\d{2}\/\d{2}\/\d{4}*"
name="payload[date_of_birth]" 
type="date" _flx1_12_1="1" _flx1_13_1="1">

当我选择日期时,我的JS触发器会在控制台中输出null。为什么不显示我选择的日期?我只想查看日期,以便我可以看到值的格式,以便我可以为它设置一些验证。

谢谢,尼克

4 个答案:

答案 0 :(得分:0)

尝试使用console.log(this.value);代替console.log(this.getAttribute('value'));

this.getAttribute将抓住HTML atrribute

答案 1 :(得分:0)

<span>最新消息</span>
<span class="pipe">18 �Q�G�� 2015</span>

您可以使用上面的代码来获取该HTML元素的日期。

答案 2 :(得分:0)

你可以尝试:

document.getElementById('date_of_birth').addEventListener('change', function() {
    console.log(this.value);
});

OR

document.getElementById('date_of_birth').addEventListener('change', function() {
    console.log(document.getElementById('date_of_birth').value);
});

答案 3 :(得分:0)

试试这个......

getAttribute可用于已定义或自定义属性。您应该使用.value

document.getElementById('date_of_birth').addEventListener('change', function() {
  console.log(this.value);
});
<input id="date_of_birth" 
       class="input input--bravo pad-1/2 span-1x field-date_of_birth is-invalid" 
       data-palm="span-1x" 
       placeholder="dd/mm/yyyy" 
       pattern="\d{2}\/\d{2}\/\d{4}*" 
       name="payload[date_of_birth]" 
       type="date" _flx1_12_1="1" _flx1_13_1="1">

您可以在下面的案例中使用getAttribute

document.getElementById('date_of_birth').addEventListener('change', function() {
  console.log(this.getAttribute('value'));
});
<input id="date_of_birth" 
       class="input input--bravo pad-1/2 span-1x field-date_of_birth is-invalid" 
       data-palm="span-1x" 
       placeholder="dd/mm/yyyy" 
       pattern="\d{2}\/\d{2}\/\d{4}*" 
       name="payload[date_of_birth]" 
       value="01/01/2016"
       type="date" _flx1_12_1="1" _flx1_13_1="1">