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. Required fields are marked *