如何在Jquery datePicker选项中运行多个带返回的函数 beforeShowDay。

问题描述 投票：0回答：1

我使用日期选择器，并在日历中标记日期，我有两个功能（工作日和日期）。我有两个功能（工作日和日期）。工作日决定并设置工作日。Dates决定要着色的日子。每个函数都能正常工作，但我必须在日历上同时进行。函数调用的顺序并不重要。

有两种类型的日子是不同的颜色。

  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>
jquery jquery-ui datepicker
1个回答
1
投票

考虑这个例子。它首先寻找Workdays（M - F），然后添加一个类。如果当时的日子在你的Object中，那高亮就会被应用。

$(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>
0
投票

我现在已经这样解决了。非常感谢大家的支持

例子 周三，周六和周日现在在日历中被屏蔽了，不能被标记。

$(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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.