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:

date-picker functioning

Still need help? Contact Us Contact Us