Question

我想强调一个日期＆amp;当我在其上拖动鼠标时，将消息添加到该日期。代码是： -

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

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

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

快乐编码：）

使用DatePicker突出显示jQuery中的特定日期

1 个答案: