输入类型 =“日期”不识别从休息返回的日期答案

【问题标题】：Input Type="Date" Doesn't Recognize Date Returned from Rest输入类型 =“日期”不识别从休息返回的日期
【发布时间】：2021-02-10 14:05:49
【问题描述】：

我有一个获取大约 12 个 SharePoint 列表列值的提取。我遇到问题的一列值是 ID 为“WeekOf”的列，它是一个日期和时间列。

用户填写的将项目存储在 SharePoint 列表中的 InfoPath 表单使用“日期”类型输入作为 Week Of 值，并且在表单和 SharePoint 列表中存储为 MM/DD/YYYY。

当它被拉取并存储在开发者工具的网络结果选项卡中时，它会被格式化为 YYYY-MM-DDT05:00:00Z。

我的应用程序获取此 SharePoint 列表数据，并将其发布到可打印页面上的 HTML 列表以保存记录。我有它，所以页面加载时没有数据显示，然后用户根据关联的日期搜索信息。当我将输入类型设置为“日期”并搜索适当的日期时，即使日期相同，也不会出现任何内容。输入日期似乎正在搜索格式为 MM/DD/YYYY 的日期。

var data = [
    {
      "Team": "Eagles",
      "WeekOf": "2021-01-31T05:00:00Z",
      "Tasks": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
      "Deliverables": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
      "Actions": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
      "Billable": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
      "NonBillable": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
      "UpcomingEvents": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
      "Training": null,
      "Resource": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
      "Support": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."
    },
{
      "Team": "Raiders",
      "WeekOf": "2021-01-31T05:00:00Z",
      "Tasks": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
      "Deliverables": null,
      "Actions": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
      "Billable": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
      "NonBillable": null,
      "UpcomingEvents": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
      "Training": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
      "Resource": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
      "Support": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."
    },
{
      "Team": "Vikings",
      "WeekOf": "2021-03-30T05:00:00Z",
      "Tasks": null,
      "Deliverables": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
      "Actions": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
      "Billable": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
      "NonBillable": null,
      "UpcomingEvents": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
      "Training": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
      "Resource": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
      "Support": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."
    }
  ];

function onSuccess(data) {
     var listContent = [];
   
     for (var i = 0; i < data.length; i++) {
         listContent += '<li data-weekOf="'+data[i].WeekOf+'">';
         listContent += '<h2>' + data[i].Team  +'</h2>';
         listContent += '<h4> Tasks </h4>';
         if(data[i].Tasks !== null){
            listContent += '<ul>' + "- " + data[i].Tasks + '</ul>';
         }else{
              listContent += '<ul>' + "- There were no notes attached to this section." + '</ul>';
         }
         listContent += '<h4> Deliverables </h4>';
                 if(data[i].Deliverables !== null){
         listContent += '<ul>' + "- " + data[i].Deliverables + '</ul>';
         }else{
         listContent += '<ul>' + "- There were no notes attached to this section." + '</ul>';
         }
         listContent += '<h4> Personnel Actions </h4>';
                 if(data[i].Actions !== null){
         listContent += '<ul>' + "- " + data[i].Actions + '</ul>';
         }else{
         listContent += '<ul>' + "- There were no notes attached to this section." + '</ul>';
         }
         listContent += '<h4> Finance (Billable) </h4>';
                 if(data[i].Billable !== null){
         listContent += '<ul>' + "- " + data[i].Billable + '</ul>';
         }else{
         listContent += '<ul>' + "- There were no notes attached to this section." + '</ul>';
         }
         listContent += '<h4> Finance (Non-Billable) </h4>';
         if(data[i].NonBillable !== null){
                 listContent += '<ul>' + "- " + data[i].NonBillable + '</ul>';
         }else{
         listContent += '<ul>' + "- There were no notes attached to this section." + '</ul>';
         }
         listContent += '<h4> Upcoming Events </h4>';
         if(data[i].UpcomingEvents !== null){
         listContent += '<ul>' + "- " + data[i].UpcomingEvents + '</ul>';
         }else{
         listContent += '<ul>' + "- There were no notes attached to this section." + '</ul>';
         }
         listContent += '<h4> Training </h4>';
         if(data[i].Training !== null){
         listContent += '<ul>' + "- " + data[i].Training + '</ul>';
         }else{
         listContent += '<ul>' + "- There were no notes attached to this section." + '</ul>';
         }
         listContent += '<h4> Resource Request </h4>';
         if(data[i].Resource !== null){
         listContent += '<ul>' + "- " + data[i].Resource + '</ul>';
         }else{
         listContent += '<ul>' + "- There were no notes attached to this section." + '</ul>';
         }
         listContent += '<h4> Support Request </h4>';
         if(data[i].Support !== null){
         listContent += '<ul>' + "- " + data[i].Support + '</ul>';         
         }else{
         listContent += '<ul>' + "- There were no notes attached to this section." + '</ul>';
         }
         listContent += '</li>';
 }
   $('#report-summary').html(listContent);
   $('#under_txt').text(' ');
  }
  $(document).ready(function(){
    onSuccess(data);
  });
  
$(document).ready(function(){
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    if($.trim(value)==''){
        onSuccess(data);
        return;
    }
    $('#under_txt').text(value);
    $('li').fadeOut(10);
    $('[data-weekOf='+value+']').fadeIn();
  });
  
});
function sortNewestFirst(){
  var elements = $('[data-weekOf]');
  elements.sort(function (a, b) {
      return new Date($(b).attr('data-weekOf')) - new Date($(a).attr('data-weekOf'));
  });
  $('#report-summary').html(elements);
 }
function sortOldestFirst(){
  var elements = $('[data-weekOf]');
  elements.sort(function (a, b) {
      return new Date($(a).attr('data-weekOf')) - new Date($(b).attr('data-weekOf'));
  });
  $('#report-summary').html(elements);

}
$('a.printPage').click(function(){
        $('#report-summary').show();
           window.print();
           return false;
});

h2{
 text-align: left;
 text-decoration: underline;
 font-size: 20px;
}
h1{
  font-size: 25px;
  text-align: center;
}
ul {
  list-style-type: none;
  padding: 0px;
  margin-left: 0px;
}
li{
    list-style-type: none;
}
span{
  font-size: 15px;
}
#report-summary{
  margin-left: 15px;
  margin-right: 15px;
}
#search{
  text-align: center;
}
p {
  text-align: center;
}
h4{
  font-size: 17px;
  font-weight: normal;
  text-decoration: underline;
  margin-top: -10px;
  margin-bottom: -10px;
}
#myInput{
  text-align: center;
}
#under_txt{
margin-left: 5px;
padding: 0px 10px 0px 10px;
}
@page { size:  auto; margin: 50px; }
@media print {
  #search,
  .printPage {
    display: none;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link type="text/css" media="all" rel="stylesheet">
<div class="container">
<div id="search">
<input id="myInput" type="date" placeholder="Search for Week Of">
</div>
<a class="printPage" href="#">Print Page</a>

<h1>
Weekly Report
</h1>
<p>Week Of<span id="under_txt"></span></p>
<div id="report-summary">

</div>
</div>

【问题讨论】：

假设负载有效，请使用示例对象将您的 sn-p 更新为 minimal reproducible example - 您的 sn-p 现在失败了
@mplungjan 正在更新。给我一秒钟
我们只需要一个示例对象和您的循环
@mplungjan 这是一个小提琴，我也会修复 sn-p jsfiddle.net/nmyd5h2b

标签： javascript html jquery date

【解决方案1】：

两个变化

数据属性必须小写
您的日期选择器是 yyyy-mm-dd 但您的日期属性是 yyyy-mm-ssThh:mm:ssZ

    $('[data-weekof]').each(function() {
      if (this.dataset.weekof.includes(value)) $(this).fadeIn();
    });

如果您将属性小写，则可以使用

var data = [{
    "Team": "Eagles",
    "WeekOf": "2021-01-31T05:00:00Z",
    "Tasks": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
    "Deliverables": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
    "Actions": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
    "Billable": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
    "NonBillable": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
    "UpcomingEvents": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
    "Training": null,
    "Resource": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
    "Support": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."
  },
  {
    "Team": "Raiders",
    "WeekOf": "2021-01-31T05:00:00Z",
    "Tasks": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
    "Deliverables": null,
    "Actions": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
    "Billable": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
    "NonBillable": null,
    "UpcomingEvents": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
    "Training": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
    "Resource": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
    "Support": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."
  },
  {
    "Team": "Vikings",
    "WeekOf": "2021-03-30T05:00:00Z",
    "Tasks": null,
    "Deliverables": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
    "Actions": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
    "Billable": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
    "NonBillable": null,
    "UpcomingEvents": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
    "Training": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
    "Resource": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
    "Support": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."
  }
];

function onSuccess(data) {
  var listContent = [];

  for (var i = 0; i < data.length; i++) {
    listContent += '<li data-weekof="' + data[i].WeekOf + '">';
    listContent += '<h2>' + data[i].Team + '</h2>';
    listContent += '<h4> Tasks </h4>';
    if (data[i].Tasks !== null) {
      listContent += '<ul>' + "- " + data[i].Tasks + '</ul>';
    } else {
      listContent += '<ul>' + "- There were no notes attached to this section." + '</ul>';
    }
    listContent += '<h4> Deliverables </h4>';
    if (data[i].Deliverables !== null) {
      listContent += '<ul>' + "- " + data[i].Deliverables + '</ul>';
    } else {
      listContent += '<ul>' + "- There were no notes attached to this section." + '</ul>';
    }
    listContent += '<h4> Personnel Actions </h4>';
    if (data[i].Actions !== null) {
      listContent += '<ul>' + "- " + data[i].Actions + '</ul>';
    } else {
      listContent += '<ul>' + "- There were no notes attached to this section." + '</ul>';
    }
    listContent += '<h4> Finance (Billable) </h4>';
    if (data[i].Billable !== null) {
      listContent += '<ul>' + "- " + data[i].Billable + '</ul>';
    } else {
      listContent += '<ul>' + "- There were no notes attached to this section." + '</ul>';
    }
    listContent += '<h4> Finance (Non-Billable) </h4>';
    if (data[i].NonBillable !== null) {
      listContent += '<ul>' + "- " + data[i].NonBillable + '</ul>';
    } else {
      listContent += '<ul>' + "- There were no notes attached to this section." + '</ul>';
    }
    listContent += '<h4> Upcoming Events </h4>';
    if (data[i].UpcomingEvents !== null) {
      listContent += '<ul>' + "- " + data[i].UpcomingEvents + '</ul>';
    } else {
      listContent += '<ul>' + "- There were no notes attached to this section." + '</ul>';
    }
    listContent += '<h4> Training </h4>';
    if (data[i].Training !== null) {
      listContent += '<ul>' + "- " + data[i].Training + '</ul>';
    } else {
      listContent += '<ul>' + "- There were no notes attached to this section." + '</ul>';
    }
    listContent += '<h4> Resource Request </h4>';
    if (data[i].Resource !== null) {
      listContent += '<ul>' + "- " + data[i].Resource + '</ul>';
    } else {
      listContent += '<ul>' + "- There were no notes attached to this section." + '</ul>';
    }
    listContent += '<h4> Support Request </h4>';
    if (data[i].Support !== null) {
      listContent += '<ul>' + "- " + data[i].Support + '</ul>';
    } else {
      listContent += '<ul>' + "- There were no notes attached to this section." + '</ul>';
    }
    listContent += '</li>';
  }
  $('#report-summary').html(listContent);
  $('#under_txt').text(' ');
}
$(document).ready(function() {
  onSuccess(data);
});

$(document).ready(function() {
  $("#myInput").on("input", function() {
    var value = $(this).val().toLowerCase();
    console.log(value, $('[data-weekOf=' + value + ']').length)
    if ($.trim(value) == '') {
      onSuccess(data);
      return;
    }
    $('#under_txt').text(value);
    $('li').fadeOut(10);
    $('[data-weekof]').each(function() {
      if (this.dataset.weekof.includes(value)) $(this).fadeIn();
    });
  });

});

function sortNewestFirst() {
  var elements = $('[data-weekOf]');
  elements.sort(function(a, b) {
    return new Date($(b).attr('data-weekOf')) - new Date($(a).attr('data-weekOf'));
  });
  $('#report-summary').html(elements);
}

function sortOldestFirst() {
  var elements = $('[data-weekOf]');
  elements.sort(function(a, b) {
    return new Date($(a).attr('data-weekOf')) - new Date($(b).attr('data-weekOf'));
  });
  $('#report-summary').html(elements);

}
$('a.printPage').click(function() {
  $('#report-summary').show();
  window.print();
  return false;
});

h2 {
  text-align: left;
  text-decoration: underline;
  font-size: 20px;
}

h1 {
  font-size: 25px;
  text-align: center;
}

ul {
  list-style-type: none;
  padding: 0px;
  margin-left: 0px;
}

li {
  list-style-type: none;
}

span {
  font-size: 15px;
}

#report-summary {
  margin-left: 15px;
  margin-right: 15px;
}

#search {
  text-align: center;
}

p {
  text-align: center;
}

h4 {
  font-size: 17px;
  font-weight: normal;
  text-decoration: underline;
  margin-top: -10px;
  margin-bottom: -10px;
}

#myInput {
  text-align: center;
}

#under_txt {
  margin-left: 5px;
  padding: 0px 10px 0px 10px;
}

@page {
  size: auto;
  margin: 50px;
}

@media print {
  #search,
  .printPage {
    display: none;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link type="text/css" media="all" rel="stylesheet">
<div class="container">
  <div id="search">
    <input id="myInput" type="date" placeholder="Search for Week Of">
  </div>
  <a class="printPage" href="#">Print Page</a>

  <h1>
    Weekly Report
  </h1>
  <p>Week Of<span id="under_txt"></span></p>
  <div id="report-summary">

  </div>
</div>

【讨论】：

您可以编辑您的响应以在加载时不显示数据，但在搜索时显示与日期对应的数据，然后在更改时再次为空？这就是我现在设置它的方式，它有点不同