如何在 Jquery datePicker 选项 beforeShowDay 中运行多个函数并返回
Posted
技术标签:
【中文标题】如何在 Jquery datePicker 选项 beforeShowDay 中运行多个函数并返回【英文标题】：How to run multiple function with returns in Jquery datePicker option beforeShowDay 【发布时间】：2020-08-20 04:29:52 【问题描述】：我使用日期选择器并在日历中标记日期。我有两个功能（工作日和日期）。 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>【问题讨论】：
我没有看到任何一个例子都在使用。请进一步澄清问题并提供一个最小的、可重现的示例：***.com/help/minimal-reproducible-exampleworkingDays 在哪里定义，它的值是什么？
对不起，我在上面的代码中添加了缺失的变量。
【参考方案1】：
考虑这个例子。它首先查找 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>【讨论】：
【参考方案2】：我现在已经这样解决了。非常感谢您的支持！
例如：周三、周六和周日现在在日历中被屏蔽，无法标记。
$(function()
var dates = [
date: '05/13/2020',
type: 'highlightFull',
note: 'note1'
,
date: '05/11/2020',
type: 'highlightSemi',
note: 'note2'
];
var workingDays = [6,0,3]; // 0 = Sunday
function highlightDays(date)
var res = [true, ""];
if(workingDays.indexOf(date.getDay()) > -1)
res = [false, ""];
$.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;
<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>【讨论】：
以上是关于如何在 Jquery datePicker 选项 beforeShowDay 中运行多个函数并返回的主要内容，如果未能解决你的问题，请参考以下文章
jQuery Datepicker - 根据所选选项刷新可选择的日期
如何使 jquery datepicker 默认日期为 mm-yyyy（字面意思）