使用 DatePicker 在 jQuery 中突出显示特定日期答案

【问题标题】：Highlight Specific Dates in jQuery Using DatePicker使用 DatePicker 在 jQuery 中突出显示特定日期
【发布时间】：2013-07-13 10:34:43
【问题描述】：

当我在其上拖动鼠标时，我想突出显示一个日期并向该日期添加消息。代码是：-

<head runat="server">
<title>HoliDayHighlight</title>
<link href="StyleSheet1.css" rel="stylesheet" type="text/css" />
<script language= "jscript">
  $(document).ready(function() {
    var SelectedDates = {};
    SelectedDates[new Date('07/10/2013')] = new Date('07/10/2013');
    SelectedDates[new Date('07/15/2013')] = new Date('07/15/2013');
    SelectedDates[new Date('07/20/2013')] = new Date('07/20/2013');

    $("#txtDate").datepicker({
        beforeShowDay: function(date) {
            var Highlight = SelectedDates[date];
            if (Highlight) {
                return [true, "Highlighted", Highlight];
            }
            else {
                return [true, '', ''];
            }
        }
    });
});

</script>
</head>

<body>
<form id="form1" runat="server">
<div style="height: 220px">
<div style="height: 191px; width: 1156px">
<asp:TextBox ID="txtDate" runat="server"></asp:TextBox>
 </div>
</div>
</form>
</body>

我希望它在日期显示一条消息。例如：- 我们声明 7 月 15 日是假期。当我将鼠标悬停在日历中的 15 日时，将显示一条小消息（例如：-今天是假期），当我移开鼠标时，该消息将显示出来。

我认为这段代码是正确的。但是，当我点击文本框时，日历没有来。

【问题讨论】：

标签： jquery asp.net jquery-ui

【解决方案1】：

签出以下我刚刚测试过的代码：)

 <html>
  <head>
  <title> Datepicker Swappy</title>
   <script type='text/javascript'        src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
   <link rel="stylesheet" type="text/css" href="/css/normalize.css"
  <script type="text/javascript" src="http://code.jquery.com/ui/1.8.18/jquery-ui.min.js"></script>
   <link rel="stylesheet" type="text/css" href="/css/result-light.css">
   <link rel="stylesheet" type="text/css"   href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery.ui.all.css">
    <style type='text/css'>
    body
    {
    font-family:Arial;
    font-size : 10pt;
    padding:5px;
    }

  .Highlighted a
  {
    background-color : Orange !important;
    background-image :none !important;
    color: White !important;
    font-weight:bold !important;
    font-size: 12pt;
  }

  </style>
   <script type='text/javascript'>
 $(window).load(function(){
  $(document).ready(function() {
   var SelectedDates = {};
    SelectedDates[new Date('04/05/2014')] = new Date('04/05/2014');
    SelectedDates[new Date('05/04/2014')] = new Date('05/04/2014');
    SelectedDates[new Date('06/06/2014')] = new Date('06/06/2014');

   var SeletedText = {};
    SeletedText[new Date('04/05/2014')] = 'Holiday 1';
    SeletedText[new Date('05/04/2014')] = 'Holiday 2';
    SeletedText[new Date('06/06/2014')] = 'Holiday 3';    

   $('#txtDate').datepicker({
    beforeShowDay: function(date) {
        var Highlight = SelectedDates[date];
        var HighlighText = SeletedText[date]; 
        if (Highlight) {
            return [true, "Highlighted", HighlighText];
        }
        else {
            return [true, '', ''];
        }
       }
     });
    });
  });
 </script>
  </head>
  <body>
   <input type='text' id='txtDate' />
 </body>
</html>

编码愉快:)

【讨论】：