bootstrap datepicker 只显示部分日期 并添加文本注释
2017-03-02 00:00
483 查看
html部分
<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">
<p>日期：<input type="text" id="datepicker"></p>
js部分
<script>
var availableDates = ["9-3-2017","20-3-2017","20-4-2017","2-4-2017","14-3-2017","15-3-2017"];
var availablePrice = ['9','20','15','14'];
function available(date) {
dmy = date.getDate() + "-" + (date.getMonth()+1) + "-" + date.getFullYear();
if ($.inArray(dmy, availableDates) != -1) {
return [true, "","Available"];
} else {
return [false,"","unAvailable"];
}
}
/*
dateFormat: "yy-mm-dd"
*/
$(function() {
$( "#datepicker" ).datepicker({
//format: 'hello dd/MM/yyyy hh:mm:ss',
//format: "dd/mm/yyyy",
dateFormat: "yy/dd/mm price",
startDate: "today",
autoclose: true,
beforeShowDay:available
}).on( "click", function() {
var dTxt = $( this ).data('dptxt');
$('.ui-datepicker-calendar').after('<span class="middle">'+'aaaa'+'</>');
});
$("#datepicker").focus(function () {
$(".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>
<body><p>日期：<input type="text" id="DatePicker"></p> </body>
js代码
<script>
var availableDates = ["9-3-2017","20-3-2017","20-4-2017","2-4-2017","14-3-2017","15-3-2017"];
var availablePrice = ['9','20','15','14'];
function available(date) {
dmy = date.getDate() + "-" + (date.getMonth()+1) + "-" + date.getFullYear();
if ($.inArray(dmy, availableDates) != -1) {
return [true, "","Available"];
} else {
return [false,"","unAvailable"];
}
}
;
$('#DatePicker').datepicker({
changeMonth: true,
changeYear: true,
minDate: 0,
//The calendar is recreated OnSelect for inline calendar
onSelect: function (date, dp) {
updateDatePickerCells();
},
onChangeMonthYear: function(month, year, dp) {
updateDatePickerCells();
},
beforeShowDay:available,
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>
效果图
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Date Range Picker和bootstrapValidator同时使用时，选择日期后无法正常触发校验
- jQuery里面的datepicker日期控件默认是显示英文的，如何显示中文或其他语言呢？
- 修复bootstrap daterangepicker不能清空日期的问题
- MyDatePicker拆分日期显示到不同TextBox
- My97 datepicker 日期控件添加时间自动选择 年龄，生肖，星座
- jQuery里面的datepicker日期控件默认是显示英文的，如何让他显示中文呢？
- bootstrap-datepicker 与bootstrapValidator同时使用时，选择日期后，无法正常触发校验
- bootstrap-datepicker动态设置日期的startDate和endDate
- DatePicker TimePicker 与TextView同步显示日期和时间
- 日期选择器react-bootstrap-date-picker的使用
- 日期控件DatePicker只显示年月不显示日
- 关于DatePicker的理解（显示当前日期和时间）
- android—DatePicker 和TimePicker显示日期以及使用TimePickerDialog,DatePickerDialog来专门实现时间选择对话框
- Kendo Ui 中日期控件DatePicker显示格式更改
- WPF -- 设置 DatePicker 的日期时间显示格式
- 日期控件NoDayDatePicker只显示年月不显示日 兼容5.0以上的方法
- jQuery UI datepicker用beforeShowDay给特殊日期添加样式以及常用的属性
- Kendo Ui 中日期控件DatePicker显示格式更改
- bootstrap datepicker时间插件显示位置不对
- bootstrap datepicker 在bootstrap modal中不显示问题