1

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

<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 日时，将显示一条小消息（例如：-今天是假期），当我移开鼠标时，该消息将显示。

我认为这段代码是正确的。但是，当我单击文本框时，日历不会出现。

4

1 回答 1

0

检查以下我刚刚测试过的代码是否正常工作:)

 <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>

快乐编码:)

于 2014-03-25T11:28:34.683 回答