jquery - 如何在 Jquery datePicker 选项 beforeShowDay 中运行多个函数并返回
问题描述
我使用日期选择器并在日历中标记日期。我有两个功能(工作日和日期)。Workdays 确定并设置工作日。日期确定要着色的日期。每个功能都可以正常工作,但我必须在日历上同时执行。函数调用的顺序无关紧要。
有两种颜色不同的日子。
var arrayLength = Object.keys(dates).length
for (var i = 0; i < arrayLength; i++) {
if (new Date(dates[i].date).toString() == date.toString()) {
return [true, dates[i].type, dates[i].note];
}
}
return [true, ''];
然后我定义可以标记哪些日期:
return [workingDays.indexOf (date.getDay ())> -1];
如何在 beforeShowDay 中调用两个返回?
var workingDays = [1,2,3,4,5];
var dates = [
{date: '05/13/2020', type: 'highlightFull', note: 'note1'},
{date: '05/11/2020', type: 'highlightSemi', note: 'note2'}
];
function highlightDays(date) {
// return [workingDays.indexOf(date.getDay()) > -1]; // First Return
var arrayLength = Object.keys(dates).length // Second
for (var i = 0; i < arrayLength; i++) {
if (new Date(dates[i].date).toString() == date.toString()) {
return [true, dates[i].type, dates[i].note];
}
}
return [true, ''];
}
$(document).ready(function() {
$('#datepicker').datepicker({
beforeShowDay: highlightDays
});
});
td.highlightFull {
border: none !important;
padding: 1px 0 1px 1px !important;
background: none !important;
overflow: hidden;
}
td.highlightFull a {
background: #ad3f29 url(bg.png) 50% 50% repeat-x !important;
border: 1px #88a276 solid !important;
}
td.highlightSemi {
border: none !important;
padding: 1px 0 1px 1px !important;
background: none !important;
overflow: hidden;
}
td.highlightSemi a {
background: #ffff33 url(bg.png) 50% 50% repeat-x !important;
border: 1px #88a276 solid !important;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#datepicker" ).datepicker();
} );
</script>
</head>
<body>
<div id="datepicker"></div>
</body>
</html>
解决方案
考虑这个例子。它首先查找 Workdays (M - F) 并添加一个类。如果那天在您的对象中,则应用该突出显示。
$(function() {
var dates = [{
date: '05/13/2020',
type: 'highlightFull',
note: 'note1'
},
{
date: '05/11/2020',
type: 'highlightSemi',
note: 'note2'
}
];
function highlightDays(date) {
var res = [true, ""];
if (date.getDay() > 0 && date.getDay() < 6) {
res = [true, "workday"];
}
$.each(dates, function(k, v) {
if (v.date === $.datepicker.formatDate("mm/dd/yy", date)) {
res = [true, v.type, v.note];
}
});
return res;
}
$('#datepicker').datepicker({
beforeShowDay: highlightDays
});
});
td.highlightFull {
border: none !important;
padding: 1px 0 1px 1px !important;
background: none !important;
overflow: hidden;
}
td.highlightFull a {
background: #ad3f29 url(bg.png) 50% 50% repeat-x !important;
border: 1px #88a276 solid !important;
}
td.highlightSemi {
border: none !important;
padding: 1px 0 1px 1px !important;
background: none !important;
overflow: hidden;
}
td.highlightSemi a {
background: #ffff33 url(bg.png) 50% 50% repeat-x !important;
border: 1px #88a276 solid !important;
}
td.workday {
border: none !important;
padding: 1px 0 1px 1px !important;
background: none !important;
overflow: hidden;
}
td.workday a {
background: #ccccff url(bg.png) 50% 50% repeat-x !important;
border: 1px #88a276 solid !important;
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="datepicker"></div>
推荐阅读
- git - 尝试自动完成“git stash drop”会产生错误输出
- sql - 如何使用 Access VBA 将两个查询的结果显示到 MS 图表对象上
- routes - Polymer1.0 应用路由器不工作。路由没有发生
- angular - Angular 9 - 延迟加载在生产构建中不起作用
- python - 如何为 mypy 定义类字典的类型?
- python - a = b 和 a = b[:] 有什么区别?
- javascript - ngx-quill:无法创建自定义列表印迹
- java - SWT - 如何判断小部件/复合材料在某些坐标处有滚动条或对象是滚动条
- php - XeroAPI - 禁止发票附件访问
- moodle - 允许在 Moodle 作文问题中粘贴答案