基于日期显示日期的Javascript

Javascript for displaying day based on the date

本文关键字：日期 显示 Javascript 于日期      更新时间：2023-09-26

我有以下一组标签：

<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();之后收到以下错误消息：

未捕获的类型错误：undefined不是函数。

为什么我不能在这里使用getDay()？

您将输入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

.getDay((的实现可能是错误的，或者您传入了错误类型的变量reserveDate。后者更有可能。使用console.log(reserveDate(查看变量的实际内容，并确保它是Date对象的类型。

由于您正试图在showHours()函数中调用getDate()方法，因此应该传入一个日期对象(根据当前文本输入的值实例化(，以便单击事件的回调看起来如下所示：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";
  }
}
相关文章：