Question

我有以下标签集：

<input type="text" class="form" id="reserveDate" placeholder="Select date"
       onclick="showHours(reserveDate);" onfocus="(this.type='date')" required>
<p id="demo"></p>

我的JS代码如下：

function showHours(reserveDate) {
    var d = reserveDate.getDay();
    if( d >= 0){
        document.getElementById("demo").innerHTML = "sunday";
    }
}

我正在尝试使用CDT进行调试，我在var d = reserveDate.getDay();之后收到以下错误消息：

未捕获的TypeError：undefined不是函数。

我有理由不在这里使用getDay()吗？

Answer 1

您正在将输入ID传递给showHours函数，并且因为所有ID都存储为全局范围内的window.ID，您将获得HTML元素，而不是日期对象。

删除内联onclick处理程序并使用正确的事件处理程序

<input type="date" class="form" id="reserveDate" placeholder="Select date" required>

然后再做

var elem = document.getElementById('reserveDate');

elem.addEventListener('change', function() {
    var days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
    var date = new Date(this.value);
    var day  = date.getDay();

    document.getElementById('demo').innerHTML = days[day];
}, false);

FIDDLE

Answer 2

你的.getDay（）的实现可能是错误的，或者你传递了一个错误类型的变量作为reserveDate。后者更有可能。检查console.log（reserveDate）以查看变量实际是什么，并确保其类型为Date对象。

Answer 3

由于您尝试在getDate()函数中调用showHours()方法，因此应该传入一个日期对象（从当前文本输入的值实例化），以便回调点击事件如下所示：showHours(new Date(this.value));

<input 
  type="text" 
  class="form" 
  id="reserveDate" 
  placeholder="Select date" 
  onClick="showHours(new Date(this.value))" 
  onfocus="(this.type='date')" 
  required />

<p id="demo"></p>

然后保持你的JS功能：

function showHours(reserveDate) {
  var d = reserveDate.getDay();
  if( d >= 0){
    document.getElementById("demo").innerHTML = "sunday";
  }
}

用于根据日期显示日期的Javascript

3 个答案: