kbi*_*oft 5 css jquery datepicker
使用与此页面相关的jQuery Datepicker http://keith-wood.name/datepick.html
我想突出显示由数组指定的日期
ex: array("2012-12-24" => "red", "2012-12-24" => "green")
怎么得到这种方法.
我糟糕的代码
<style type="text/css">
@import"jquery.datepick.css";
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="jquery.datepick.js"></script>
<script type="text/javascript">
$(function () {
$('#popupDatepicker').datepick();
$('#inlineDatepicker').datepick({
onSelect: showDate
});
});
function showDate(date) {
alert('The date chosen is ' + date);
}
</script>
</head>
<body>
<p>A popup datepicker
<input type="text" id="popupDatepicker">
</p>
<p>Or inline</p>
<div id="inlineDatepicker"></div>
您可以使用您的代码库尝试以下一个。（这是一个示例）
\n\nCSS
\n\n.Highlighted a{\n background-color : Green !important;\n background-image :none !important;\n color: White !important;\n font-weight:bold !important;\n font-size: 12pt;\n}\njQuery
\n\n$(document).ready(function() {\n var SelectedDates = {};\n SelectedDates[new Date(\'12/25/2012\')] = new Date(\'12/25/2012\');\n SelectedDates[new Date(\'05/04/2012\')] = new Date(\'05/04/2012\');\n SelectedDates[new Date(\'06/06/2012\')] = new Date(\'06/06/2012\');\n\n $(\'#txtDate\').datepicker({\n beforeShowDay: function(date) {\n var Highlight = SelectedDates[date];\n if (Highlight) {\n return [true, "Highlighted", Highlight];\n }\n else {\n return [true, \'\', \'\'];\n }\n }\n });\n});\xe2\x80\x8b\n更新1
\n\n工作示例在这里
\n\nJquery文档说有“beforeShowDay:”选项。
\n\n\n\n更新2：
\n\n您可以通过使用 Google CDN 来引用 jquery，如下所示。所以注释掉您的 jquery 引用并得到如下所示。
\n\n<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/base/jquery-ui.css"\n type="text/css" media="all" />\n<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>\n<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>\n更新3：
\n\n下面我只提到了伪代码。根据Jquery语法进行更改。
\n\n$(document).ready(function() {\n\n$(\'#txtDate\').datepicker({\n beforeShowDay: function(date) {\n\n //according to the date you have to decide which css should load.\n var Highlight = SelectedDates[date];\n var yourColor = whichColor(SelectedDates[date]);\n\n if (Highlight && yourColor ==\'red\') {\n return [true, "RedHighlighted", Highlight];\n }\n else if (Highlight && yourColor ==\'green\') {\n return [true, "GreenHighlighted", Highlight];\n }\n else {\n return [true, \'\', \'\'];\n }\n }\n});\n\n\n//return a color according to your date logic\n function whichColor(dateArray) { \n\n return color;\n }\n});\xe2\x80\x8b
\n\n有关更多信息，请查看jQuery UI DatePicker 中突出显示特定日期
\n\n我希望这对你有帮助。
\n| 归档时间： |
|
| 查看次数： |
3850 次 |
| 最近记录： |