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

Question

I have a piece of code which is used on a Shopify website. Basically there are 3 delivery options, one of which is Saturday delivery which disables all days apart from Saturdays if that radio is selected.

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

What I need is a function that doesn't break my current code that disables UK Bank Holidays. I have seen this can be done manually by adding the dates and disabling them but everything I have tried doesn't work or breaks my current code.

Here is a snippet of my code, if any jquery/javascript guru's can help out that would be appreciated as I am not too advanced in this area.

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

By default I have disabled saturday and sunday deliveries by keeping daysOfWeekDisabled: [0,6] and for Saturday delivery option, I have kept it like - daysOfWeekDisabled: [0,1,2,3,4,5]. Bank holidays list resides in datesDisabled. Also mindate and maxDate are startDate and 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 appears to be functionality for the bootstrap datepicker.

You can add a check to the beforeShowDay function, I would separate this from the different parts and use variables as necessary.

translate the Saturday deliveries from

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

to beforeShowDay: saturdayOnly

and your default

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

  } 

to beforeShowDay: notSunMon

then add the handling for these two options:

```

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

```

This uses a function to format your dates, to make sure they're all correct, and adds css classes. See the jsfiddle for how these are implemented.

Just a note, days !=0 && day != 1 checks for "not a Sunday/Monday"

Try it out with jsfiddle: https://jsfiddle.net/vreemt/sbrtyvoz/