jQuery DatePicker UI-通过自定义功能禁用英国银行假期

我有一个在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 guru可以帮助您，因为我在这个领域不太先进。

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), ''];
  } 

});
});

datesDisabled似乎是bootstrap datepicker的功能。

您可以将支票添加到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检查"不是星期日/星期一"

使用JSFiddle尝试一下：https：//jsfiddle.net/vreemt/sbrtyvoz/

默认情况下，我已经通过保持周六和周日的送货来保留daysofweekdisabled：[0,6]，对于周六的交货选项，我将其保留为-Weekeekdisabled -daysofweekdisabled：[0,1,2，2，[0,1,2，3,4,5]。银行假期列表位于datesdisabled中。头脑和麦克斯特(Maxdate(也是起步和终结。

        <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>

相关内容

最新更新

热门标签：