定制化数据采集器
定制化数据采集器
提问于 2015-11-23 10:34:56
如何自定义数据报警器？
- 我需要在顶部添加颜色描述
- 显示2个月(我认为可以用默认函数完成)
- 添加未显示数字的红色不可选日期(示例中日期为26、4和17 )
基本上，日期选择器现在看起来像像这样。需要它像这一样。
回答 2
Stack Overflow用户
发布于 2015-11-23 11:45:51
您可以尝试如下:关于主题，请访问此处：http://jqueryui.com/themeroller/
使用像numberOfMonths一样的numberOfMonths: 2来显示两个月在一起。
jQuery(document).ready(function() {
var eventDates = {};
eventDates[ new Date( '11/26/2015' )] = new Date( '11/26/2015' );
eventDates[ new Date( '11/04/2015' )] = new Date( '11/04/2015' );
eventDates[ new Date( '12/17/2015' )] = new Date( '12/17/2015' );
// datepicker
jQuery('#dates').datepicker({
beforeShowDay: function( date ) {
var highlight = eventDates[date];
if( highlight ) {
return [false, "event", highlight];
} else {
return [true, '', ''];
}
},
numberOfMonths: 2
});
});<link href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<html>
<head>
<style>
.event span {
background-color: #ff69b4 !important;
background-image :none !important;
color: #ff69b4 !important;
pointer-events: none;
cursor: default;
}
</style>
</head>
<body>
<table><tr>
<td><div style="height:20px !important;width:20px !important;background-color: #73AD21;border:solid gray 1px;"></div></td><td>available</td><td><div style="height:20px;width:20px;background-color: #FFC0CB;border:solid gray 1px;"></div></td><td>sold out</td></tr>
<tr><td colspan="4"><input type="text" id="dates"></td></tr>
</table>
</body>
</html>
Stack Overflow用户
发布于 2015-11-23 12:23:56
- 若要在数据采集器顶部添加颜色描述的图例，请查看此回答。
- 若要显示两个月，可以使用
$(".selector").datepicker({numberOfMonths: 2}); - 若要为不可选的禁用日期使用红色背景，可以使用以下CSS：
.ui-datepicker td.ui-state-disabled>span{background:#ff0000;} - 若要隐藏不可选择的禁用日期的编号，可以使用
.ui-datepicker td.ui-state-disabled>span{color:#ff0000;}或者这个回答的技术.ui-datepicker td.ui-state-disabled{text-indent:100%; white-space:nowrap; overflow:hidden;}
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/33868877
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号