如何在 Jquery datePicker 选项 beforeShowDay 中运行多个函数并返回答案

【问题标题】：How to run multiple function with returns in Jquery datePicker option beforeShowDay如何在 Jquery datePicker 选项 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>

【问题讨论】：

我没有看到任何一个例子都在使用。请进一步澄清问题并提供一个最小的、可重现的示例：stackoverflow.com/help/minimal-reproducible-example
workingDays 在哪里定义，它的值是什么？
对不起，我在上面的代码中添加了缺失的变量。

标签： jquery jquery-ui datepicker

【解决方案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>

【讨论】：