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

我想突出顯示日期&當我在該日期上拖動鼠標時，將消息添加到該日期。該代碼是： -使用DatePicker突出顯示jQuery中的特定日期

<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日時，當我移除鼠標時，將顯示一條小消息（例如：-today是假期），消息將不會出現。

我認爲這個代碼是賴特。但是，當我點擊文本框日曆不來。

來源

2013-07-13 Sabyasachi

結帳下面的代碼我只是測試它的工作:)

<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-25 11:28:34 Swapy

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

回答

相關問題