Как запустить несколько функций с возвратами в опции Jquery datePicker beforeShowDay - PullRequest
Новая
       33

Как запустить несколько функций с возвратами в опции Jquery datePicker beforeShowDay

0 голосов
/ 05 мая 2020

Я использую datepicker и отмечаю дни в календаре. У меня две функции (будни и даты). Рабочие дни определяет и устанавливает рабочие дни. Даты определяют дни, которые будут раскрашены. Каждая функция работает нормально, но в календаре нужно выполнять обе. Порядок вызова функции не имеет значения.

Есть два типа дней, которые окрашены по-разному. 

  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>

Ответы [ 2 ]

1 голос
/ 05 мая 2020

Рассмотрим этот пример. Сначала он ищет рабочие дни (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>
0 голосов
/ 06 мая 2020

Я решил вот так. Большое спасибо за поддержку!

Пример: среда, суббота и воскресенье теперь заблокированы в календаре и не могут быть отмечены. 

$(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>
...