bootstrap datepicker 只显示部分日期并添加文本注释

最新推荐文章于 2022-12-02 18:05:57 发布

chenshi1874

最新推荐文章于 2022-12-02 18:05:57 发布

阅读量345

点赞数

文章标签： javascript ui ViewUI

原文链接：https://my.oschina.net/u/3255899/blog/849242

版权

html部分

js部分

$(".ui-datepicker-calendar .ui-state-default").each(function () {
console.log($(this).html);
//add custome text to date cell$.inArray(3,arr) ==-1
if($.inArray($(this).html(),availablePrice)!=-1){$(this).html($(this).html() + "<span style='color:red;font-size:0.8em'>380<span>"); }

});
});
});
</script>

简单注释

jquery文件还是网络的可以直接用

也可以自己下载到本地

两部分--第一个可用/可点击/可选中的日期---定义在了availableDates 数组里面

（场景是旅游类，每个月的某一天或者两天是起始时间点，你可以选中该天，没有旅游的天是不可以选的，且要求可以选择的天要显示该次旅游的价格信息--比如2017-03-20和2017-03-22这两天你可以抱团旅游---点击后出现时间插件--则只显示2017-03-20和2017-03-22这两天是可选的，另外下边再备注该次团游价格）---

第二个是选中日期的对应文字---定义在了availablePrice里面

实际数据需要后台返回-----可选的日期直接返回就可以了--和数组形式对应转换一下就可以了

availableDates = ["9-3-2017","20-3-2017","20-4-2017","2-4-2017","14-3-2017","15-3-2017"];

至于对应价格---

提供一个思路---更换成关联数组---比如20170320这天是可选的，且他的价格是380--

则可选日期数组["20-3-2017"]

对应的日期价格数组['20170320'=>380]

注意：价格数组的关联key就是可选日期；所以可以实时取到对应的价格

粗略想到的，没去查看datepicker有没有具体事件对应

_________________________________________________

额。。。。。后来发现以上写法有个问题。。。无法获取对应的时间

修改如下

html代码

<head>
<meta charset="utf-8">
<title>jQuery UI 日期选择器（Datepicker） - 默认功能</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
<style>
.ui-datepicker td a:after
{
content: "";
display: block;
text-align: center;
color: Blue;
font-size: small;
font-weight: bold;
}
</style>

</head>

js代码

beforeShow: function(elem, dp) { //This is for non-inline datepicker
updateDatePickerCells();
}
});
updateDatePickerCells();
function updateDatePickerCells(dp) {
/* Wait until current callstack is finished so the datepicker
is fully rendered before attempting to modify contents */
setTimeout(function () {
//Fill this with the data you want to insert (I use and AJAX request). Key is day of month
//NOTE* watch out for CSS special characters in the value
var cellContents = {1: '20', 15: '60', 28: '100'};

//Select disabled days (span) for proper indexing but apply the rule only to enabled days(a)
$('.ui-datepicker td > *').each(function (idx, elem) {
var value = cellContents[idx + 1] || 0;

/* dynamically create a css rule to add the contents with the :after
selector so we don't break the datepicker functionality */
var className = 'datepicker-content-' + value;

if(value == 0)
addCSSRule('.ui-datepicker td a.' + className + ':after {content: "\\a0";}'); // 
else
addCSSRule('.ui-datepicker td a.' + className + ':after {content: "' + value + '";}');

$(this).addClass(className);
});
}, 0);
}var dynamicCSSRules = [];
function addCSSRule(rule) {
if ($.inArray(rule, dynamicCSSRules) == -1) {
$('head').append('<style>' + rule + '</style>');
dynamicCSSRules.push(rule);
}
}
</script>

效果图

转载于:https://my.oschina.net/u/3255899/blog/849242

chenshi1874

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
bootstrap datepicker 只显示部分日期并添加文本注释

html部分 <meta charset="utf-8"> <title>jQuery UI 日期选择器（Datepicker） - 默认功能</title> <link rel="stylesheet" href="//code...
复制链接

扫一扫