在 jQuery UI datepicker 中选择特定日期时如何显示特定的 HTML 内容？答案

【问题标题】：How to show specific HTML content when selecting certain date in jQuery UI datepicker?在 jQuery UI datepicker 中选择特定日期时如何显示特定的 HTML 内容？
【发布时间】：2016-04-13 10:13:37
【问题描述】：

很抱歉，如果这是一个显而易见的事情（或者如果这个问题以前曾被问过），但我在写这篇文章之前进行了搜索，也许我的答案在某个地方，但由于我是新手，所以我如果我错过了，对不起。

所以我尝试使用 Jquery UI 的 datepicker 将日历设置为存档。我希望当有人点击日历中的某个日期时，显示当天的事件（包括详细信息和所有内容）。

代码：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Datepicker - Icon trigger</title>
  <link rel="stylesheet" href="vendors/js/jquery-ui.css">
  <script src="vendors/js/jquery-1.12.3.min.js"></script>
  <script src="vendors/js/jquery-ui.js"></script>
  <script>
  $(function() {
    $( "#datepicker" ).datepicker({
      showOn: "button",
      buttonImage: "images/calendar.gif",
      buttonImageOnly: true,
      buttonText: "Select date"
    });
  });
  </script>
</head>
<body>

<p>Date: <input type="text" id="datepicker"> test</p>

</body>
</html>

同一主题，如何在日历中标注出实际有活动的日期，让人们不会漫无目的地浏览，寻找实际有活动的日子？

【问题讨论】：

活动在哪里？在某个数据库中？
@yuri-tkachenko 如果我可以将它们添加到 html 代码中，并且在选择日期之前它应该保持隐藏状态，我会更喜欢。例如： <div class="event" id="event-2016-04-13"> Title details etc. </div> 但如果这不可能，任何建议都会很好。
看看：api.jqueryui.com/datepicker/#option-onSelect

标签： jquery html css jquery-ui

【解决方案1】：

所以只要快速回答您的问题，您就可以在日期选择器 (http://api.jqueryui.com/datepicker/#option-onSelect) 中定义函数 onSelect 并使用它来控制要显示的内容。

我做了非常简单的演示。

HTML：

<p>Date: <input type="text" id="datepicker" />Test</p>

<div id="log">
   <div class="event" id="event-2016-04-13"> Title details etc. 13 </div>
   <div class="event" id="event-2016-04-12"> Title details etc. 12 </div> 
</div>

CSS：

.event {
  display: none;
}

JS（修改）：

$(function() {
  $( "#datepicker" ).datepicker({
    showOn: "button",
    buttonImage: "images/calendar.gif",
    buttonImageOnly: true,
    buttonText: "Select date",
    //added
    dateFormat: "yy-mm-dd",
    onSelect: function(dateText, datepicker) {
      // hide all events
      $('#log').find('.event').hide(); 
      // show only one that selected
      var event = '#event-' + dateText;
      $(event).show();
    }
  });
});

演示：jsfiddle.net/m0y3fc9x/4

【讨论】：

这正是我想要的！非常感谢！还有一个问题。当我选择另一个日期时，如何使之前的事件再次隐藏？
@elyiz 更新了答案。 $('#log').find('.event').hide(); 这条线可以解决问题！ ;)
完美！再次感谢你！在您的评论的帮助下，我实际上了解 JS 中发生了什么！