每次在对象中遇到开始日期和结束日期之间时，都会将div元素添加到页面中

Question

我正在尝试在页面中为数组中的每个对象创建div元素，其中todays日期在开始日期和结束日期参数之间，非常感谢任何帮助。其思想是使用存储在数组中的每个事件的摘要信息作为对象，为每个相应的日期创建和显示事件框。

​

var $todaysdate = new Date();
var $fullyear = $todaysdate.getFullYear();
var $month = $todaysdate.getMonth();
var $day = $todaysdate.getDate();
var $finaltoday = new Date($fullyear, $month, $day).toDateString();

var eventyz = [{
  startDate: new Date("2020-4-15").toDateString(),
  endDate: new Date("2020-4-27").toDateString(),
  summary: "Info 1"
}, {
  startDate: new Date("2020-4-28").toDateString(),
  endDate: new Date("2020-4-28").toDateString(),
  summary: "Info 2"
}, {
  startDate: new Date("2020-4-28").toDateString(),
  endDate: new Date("2020-4-28").toDateString(),
  summary: "Info 3"
}, {
  startDate: new Date("2020-5-4").toDateString(),
  endDate: new Date("2020-5-4").toDateString(),
  summary: "Info4"
}, {
  startDate: new Date("2020-5-4").toDateString(),
  endDate: new Date("2020-5-4").toDateString(),
  summary: "Info5"
}, {
  startDate: new Date("2020-5-4").toDateString(),
  endDate: new Date("2020-5-4").toDateString(),
  summary: "Info6"
}];

eventyz.forEach(function MyDumbFunction(item) {
  if (Date.parse($finaltoday) <= Date.parse(item.startDate) && Date.parse($finaltoday) >=  
    Date.parse(item.endDate)) {
    $(".tttt").append("<div class='red_block'></div>");
  }
});

.jigle {
  width: 300px;
  background: red;
  height: 100px;
}

.red_block {
  width: 300px;
  height: 300px;
  background-color: red;
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined" rel="stylesheet">
<h1 id="kk"></h1>
<div class="tttt"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

​

Answer 1

你的比较是倒退的。您做了小于开始范围和大于结束范围的操作。

​

var $todaysdate = new Date();
var $fullyear = $todaysdate.getFullYear();
var $month = $todaysdate.getMonth();
var $day = $todaysdate.getDate();
var $finaltoday = new Date($fullyear, $month, $day).toDateString();

var eventyz = [{
  startDate: new Date("2020-4-15").toDateString(),
  endDate: new Date("2020-4-27").toDateString(),
  summary: "Info 1"
}, {
  startDate: new Date("2020-4-28").toDateString(),
  endDate: new Date("2020-4-28").toDateString(),
  summary: "Info 2"
}, {
  startDate: new Date("2020-4-28").toDateString(),
  endDate: new Date("2020-4-28").toDateString(),
  summary: "Info 3"
}, {
  startDate: new Date("2020-5-4").toDateString(),
  endDate: new Date("2020-5-4").toDateString(),
  summary: "Info4"
}, {
  startDate: new Date("2020-5-4").toDateString(),
  endDate: new Date("2020-5-4").toDateString(),
  summary: "Info5"
}, {
  startDate: new Date("2020-5-4").toDateString(),
  endDate: new Date("2020-5-4").toDateString(),
  summary: "Info6"
}];

eventyz.forEach(function MyDumbFunction(item) {
  if (Date.parse($finaltoday) >= Date.parse(item.startDate) && Date.parse($finaltoday) <=  
    Date.parse(item.endDate)) {
    $(".tttt").append("<div class='red_block'></div>");
  }
});

.jigle {
  width: 300px;
  background: red;
  height: 100px;
}

.red_block {
  width: 300px;
  height: 300px;
  background-color: red;
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined" rel="stylesheet">
<h1 id="kk"></h1>
<div class="tttt"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

​