jQuery: How to Disable Certain Days on a Date Picker

jQuery is a popular method used in date pickers. In this example we restrict the only available processing days to Monday, Wednesday, and Friday. You will need to make sure you have a custom scripts directory and file and have enqued it correctly to your functions.php file first. This example uses Ben Frain's method of enquing the script as seen on his blog: 

functions.php

// allow jQuery
if ( !is_admin() ) { // instruction to only load if it is not the admin area
   // register your script location, dependencies and version
   wp_register_script('custom_script',
       get_bloginfo('stylesheet_directory') . '/js/custom_script.js',
       array('jquery'),
       '1.0' );

   // enqueue the script
   wp_enqueue_script('custom_script');
}

After that, you will add the following snippet to your new custom_script.js file:

custom_script.js

// custom date picker
jQuery( function ( $ ) {

    // Get the Date field.
    var nativeDate = $( "#autoship-next-occurrence" );
  
    // Save the value
    var originalVal = $( "#autoship-next-occurrence" ).val();
  
    // Create the custom notice box and add to body
    var noticeBox = $('<div class="native-alert" style="display:none" role="alert"></div>');
    noticeBox.appendTo($('body'));
  
    // Function that checks if entered day is a weekend
    var dissableWeekends = function(e){
      noticeBox.html("");
      var day = new Date(this.value).getUTCDay();
      if([6,0,2,4].includes(day)){
        e.preventDefault();
        this.value = originalVal;
        noticeBox.html("Please select a Monday, Wednesday, or Friday date only!").fadeIn(300).delay(2000).fadeOut(500);
      }
    };
  
    // Catch the input action & run check
    nativeDate.on('input', dissableWeekends );
  
  } );

Finally, you will just need to add custom style your notice box. Here we targeting the "native-alert" class:

style.css

/* Example CSS for Native Alert */
/* This CSS should be copied to the child theme style.css file. */
  .native-alert {
    color: #ffffff;
    background-color: #ce2a71;
    border-color: #f5c6cb;
    -webkit-box-shadow: 0 30px 60px 0 rgba(0,0,0,0.2);
    box-shadow: 0 30px 60px 0 rgba(0,0,0,0.2);
    position: fixed;
    top: 10%;
    left: 30%;
    z-index: 9999;
    padding: 40px;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: .25rem;
    font-size: 21px;
    letter-spacing: 2px;
  }

When finished your date-picker will act like: