DatePicker - в пятницу после 15:00, в понедельник отключить - PullRequest
0 голосов
/ 28 апреля 2020

Мне нужна помощь, чтобы добавить правила для datePicker.

Для текущих правил любой день (исключая выходные) после 15:00 следующего дня будет отключен в соответствии с примерами кодов ниже. Также в текущий день отключите тоже.

Но мой клиент хочет добавить другое правило, каждую пятницу после 15:00, вместо этого отключить на следующий день, который уже отключен, они хотят его в понедельник.

I нужна помощь, как на скриншоте ниже. 1 мая в пятницу, а в наступающий понедельник следует отключить.

enter image description here

 //Date Picker
  var dateToday = new Date().getHours();
  $(function() {
    $( "#ContactDate" ).datepicker({
      //minDate: dateToday,
      minDate: dateToday >= 15 ? 2 : 1,
      dateFormat: 'dd-mm-yy',
      beforeShowDay: $.datepicker.noWeekends,
      maxDate: '+1m'
    });
  });
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">

<input type="text" class="form-control w-input" placeholder="Select date" id="ContactDate">

<script src="https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.4.1.min.220afd743d.js?site=5de87425133808841c6e3b3e" type="text/javascript" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

1 Ответ

1 голос
/ 28 апреля 2020

Когда вы проверяете час (ваша переменная dateToday), вы также можете проверить dayOfWeek и добавить соответствующее смещение к вашей minDate.

Дни недели начинаются с 0 = воскресенье, поэтому пятница == 5 .

Ниже приведен обновленный код, включая передачу даты, чтобы ее можно было легко продемонстрировать при различных комбинациях даты и времени:

//Date Picker

function addDatePicker(selector, forDate) {

  var hours = forDate.getHours();
  var dow = forDate.getDay();
  var minDate = forDate.setDate(forDate.getDate() + (hours >= 15 ? 2 : 1) + (dow == 5 ? 2 : 0));

  $(selector).datepicker({
    minDate: forDate,
    dateFormat: 'dd-mm-yy',
    beforeShowDay: $.datepicker.noWeekends,
    maxDate: '+1m'
  });
}

addDatePicker("#ContactDateToday", new Date());
addDatePicker("#ContactDateWedAM", new Date(2020, 3, 29, 10));
addDatePicker("#ContactDateWedPM", new Date(2020, 3, 29, 18));
addDatePicker("#ContactDateFriAM", new Date(2020, 4, 1, 10));
addDatePicker("#ContactDateFriPM", new Date(2020, 4, 1, 18));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> Today/Now:
<input type="text" class="form-control w-input" placeholder="Select date" id="ContactDateToday">
<hr/> Wed before 3:
<input type="text" class="form-control w-input" placeholder="Select date" id="ContactDateWedAM">
<hr/> Wed after 3:
<input type="text" class="form-control w-input" placeholder="Select date" id="ContactDateWedPM">
<hr/> Fri before 3:
<input type="text" class="form-control w-input" placeholder="Select date" id="ContactDateFriAM">
<hr/> Fri after 3:
<input type="text" class="form-control w-input" placeholder="Select date" id="ContactDateFriPM">
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...