How exclude a day (jQuery datepicker + Contact Form 7)

ref. https://wordpress.org/support/topic/how-to-disable-exclude-specific-day-in-date-picker


    [date your-date id:datepicker]
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-lightness/jquery-ui.css">
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
    <script>
    jQuery(function($){
    $("#datepicker").click(function(e){
         e.preventDefault();
    }).datepicker({
      dateFormat: "yy-mm-dd",
      beforeShowDay: function (date) {
        return date.getDay() == 2 ? [false, " disabled"] : [true, " enabled"];
      }
    });
    });
    </script>
    <style>
    .disabled {
      color: #000;
    }
    .enabled {
      color: #ff0000 !important;
    }
    input::-webkit-calendar-picker-indicator{
      color:red;
    }
    input[type="date"]::-webkit-calendar-picker-indicator {
      -webkit-appearance: none;
    }
    </style>
    [submit "Submit"]

    Post navigation

    You might be interested in...

    2 responses to How exclude a day (jQuery datepicker + Contact Form 7)

    1. Hi Erik,

      Thanks for providing this solution and I use the code below in a CF7 form:

      First preferable date[date* prefdate1 min:today+3days id:datepicker1]Second preferable date[date* prefdate2 min:today+3days id:datepicker2]

      jQuery(function($){
      $(“#datepicker1”).click(function(e){
      e.preventDefault();
      }).datepicker({
      dateFormat: “dd-mm-yy”,
      beforeShowDay: function (date) {
      return ( date.getDay() === 0 || date.getDay() === 6 ) ? [false, ” disabled”] : [true, ” enabled”];
      }
      });
      });

      jQuery(function($){
      $(“#datepicker2”).click(function(e){
      e.preventDefault();
      }).datepicker({
      dateFormat: “dd-mm-yy”,
      beforeShowDay: function (date) {
      return ( date.getDay() === 0 || date.getDay() === 6 ) ? [false, ” disabled”] : [true, ” enabled”];
      }
      });
      });

      .disabled {
      color: #000;
      }
      .enabled {
      color: #ff0000 !important;
      }
      input::-webkit-calendar-picker-indicator{
      color:red;
      }
      input[type=”date”]::-webkit-calendar-picker-indicator {
      -webkit-appearance: none;
      }

      Though I have two issues:

      1) min:today+3days isn’t working, how can I make that work?
      2) the date picker is in English, how can I get it in Dutch language?

    Comments

    Your email address will not be published.