jQuery datepicker UI - 使用自定义功能禁用英国银行假期

Question

我有一段代码用于 Shopify 网站。基本上有 3 个交付选项，其中一个是星期六交付，如果选择该收音机，它会禁用星期六以外的所有日子。

<div class="delivery-radio">
 <h3>1. Choose your delivery type:</h3>
 <input type="radio" name="attributes[delivery-type]" value="Standard" checked> Standard - Delivery by 6pm (&pound;4.95)<br>
<input type="radio" name="attributes[delivery-type]" value="Pre 12" id="pre_12"> Express - Delivery by 12pm (&pound;6.25)<br>
<input type="radio" name="attributes[delivery-type]" value="saturday" id="saturday"> Saturday - Delivery by 6pm (&pound;6.95) 
</div>


<div style="width:300px; clear:both;">
  <h3>2. Pick a delivery date:</h3>
 <p>
  <input id="date" type="text" name="attributes[date]" value="{{ cart.attributes.date }}" required readonly="readonly" /> <span id="calendar_click" class="glyphicon glyphicon-calendar" aria-hidden="true"></span>
</p>
</div>

我需要的是一个不会破坏我当前禁用英国银行假期的代码的功能。我已经看到这可以通过添加日期并禁用它们来手动完成，但我尝试过的所有方法都不起作用或破坏了我当前的代码。

这是我的代码片段，如果有任何 jquery/javascript 大师可以提供帮助，我将不胜感激，因为我在这方面不是太先进。

jQuery(function() {

$('input[name="attributes[delivery-type]"]').on('click', function(){
$("#date").datepicker("destroy");
if($(this).val() == "saturday") {      
  $("#date").datepicker({
    dateFormat: 'dd-mm-yy',
    minDate: +1, 
  maxDate: '+2M',
    beforeShowDay: function(date){ return [date.getDay() == 6 || date.getDay() == 6,""]}
});
} else {
$("#date").datepicker(
{ 
  dateFormat: 'dd-mm-yy',
  minDate: +1, 
  maxDate: '+2M',
  beforeShowDay: function(date) {
    var day = date.getDay();
    return [(day != 0 && day != 1), ''];


  } 


});
 }
  });

   $("#date").datepicker(
   { 
    dateFormat: 'dd-mm-yy',
  minDate: +1, 
  maxDate: '+2M',
  beforeShowDay: function(date) {
    var day = date.getDay();
    return [(day != 0 && day != 1), ''];

  } 


});

});

Answer 1

默认情况下，我通过保留 daysOfWeekDisabled: [0,6] 禁用了周六和周日送货，对于周六送货选项，我一直保持 - daysOfWeekDisabled: [0,1,2,3,4,5] .银行假期列表位于 datesDisabled 中。 mindate 和 maxDate 也是 startDate 和 endDate。

        <div class="delivery-radio">
        <h3>1. Choose your delivery type:</h3>
        <input type="radio" name="attributes[delivery-type]" value="Standard" checked> Standard - Delivery by 6pm (&pound;4.95)<br>
       <input type="radio" name="attributes[delivery-type]" value="Pre 12" id="pre_12"> Express - Delivery by 12pm (&pound;6.25)<br>
       <input type="radio" name="attributes[delivery-type]" value="saturday" id="saturday"> Saturday - Delivery by 6pm (&pound;6.95) 
       </div>


       <div style="width:300px; clear:both;">
         <h3>2. Pick a delivery date:</h3>
        <p>
         <input id="date" type="text" name="attributes[date]" value="{{ cart.attributes.date }}" required readonly="readonly" /> <span id="calendar_click" class="glyphicon glyphicon-calendar" aria-hidden="true"></span>
       </p>
       </div>

       <script>

        $(document).ready(function(){
                var maxDate = getAdjustedDate(+60);
                var minDate = getAdjustedDate(+1);
                var tempDt = new Date();
                console.log("today: "+tempDt.getDate());
                console.log("minDate: "+minDate);
                console.log("maxDate: "+maxDate);

            $('input[name="attributes[delivery-type]"]').on('click', function(){
            $("#date").datepicker("destroy");
            if($(this).val() === "saturday") {      
              $("#date").datepicker({
                format: 'dd/mm/yyyy',
                startDate: minDate, 
                endDate: maxDate,
                daysOfWeekDisabled: [0,1,2,3,4,5],
                datesDisabled: ['30/03/2018','02/04/2018','07/05/2018','28/05/2018','27/08/2018','25/12/2018','26/12/2018']
            });
            } else {
            $("#date").datepicker(
            { 
                format: 'dd/mm/yyyy',
                startDate: minDate, 
                endDate: maxDate,
                daysOfWeekDisabled: [0,6],
                datesDisabled: ['30/03/2018','02/04/2018','07/05/2018','28/05/2018','27/08/2018','25/12/2018','26/12/2018']
            });
             }
              });

               $("#date").datepicker(
               { 
                format: 'dd/mm/yyyy',
                startDate: minDate, 
                endDate: maxDate,
                daysOfWeekDisabled: [0,6],
                datesDisabled: ['30/03/2018','02/04/2018','07/05/2018','28/05/2018','27/08/2018','25/12/2018','26/12/2018']
            });


        });

        var getAdjustedDate = function (adjustment) {
            var today = new Date();
            today.setDate(today.getDate() + adjustment);

            var dd = today.getDate()-1;
            var mm = today.getMonth()+1; //January is 0!

            var yyyy = today.getFullYear();
            if(dd<10){
                dd='0'+dd;
            };

            if(mm<10){
                mm='0'+mm;
            };

            return dd+'/'+mm+'/'+yyyy;
        };            

        </script>

Answer 2

datesDisabled 似乎是 bootstrap 日期选择器的功能。

您可以在 beforeShowDay 函数中添加一个检查，我会将其与不同的部分分开，并根据需要使用变量。

翻译来自

的星期六交货

beforeShowDay: function(date){ return [date.getDay() == 6 || date.getDay() == 6,""]}

到 beforeShowDay: saturdayOnly

和您的默认

beforeShowDay: function(date) {
    var day = date.getDay();
    return [(day != 0 && day != 1), ''];

  }

到 beforeShowDay: notSunMon

然后添加对这两个选项的处理：

```

function saturdayOnly (date) {
    return dayStatus (date, array(0,1,2,3,4,5));
}
function notSunMon (date) {
    return dayStatus (date, array(0,1));
}

var disabledDates = ["22-03-2018", "29-03-2018", "03-04-2018"];

function dayStatus (date, disableDays) {
  //Sat = 6, Sun = 0
  var dayNumber = date.getDay();

  if (disableDays.indexOf(dayNumber) !== -1) {
    return [false, ' disabledDay'];
  }

  var compareDate = formatDate(date);

  if (disabledDates.indexOf(compareDate) !== -1) {
    return [false, ' disabledDate'];
  }

  return [true, ' availableDay'];
}

function formatDate(date) {
  var dd = date.getDate().toString();
  var mm = (date.getMonth() + 1).toString(); // getMonth() is zero-based
  var yyyy = date.getFullYear().toString();

  //format as dd-mm-yyyy - make sure Disabled Dates match this format
  return (dd[1] ? dd : "0" + dd[0]) + "-" + (mm[1] ? mm : "0" + mm[0]) + "-" + yyyy;
}

```

这使用一个函数来格式化您的日期，以确保它们都是正确的，并添加 css 类。请参阅 jsfiddle 了解这些是如何实现的。

请注意，days !=0 && day != 1 检查 "not a Sunday/Monday"

用 jsfiddle 试试：https://jsfiddle.net/vreemt/sbrtyvoz/

jQuery datepicker UI - 使用自定义功能禁用英国银行假期

jQuery datepicker UI - Disabling UK Bank Holidays with custom function

javascript

jquery

datepicker

jquery-ui-datepicker