How to disable/exclude specific day in date-picker

Ciao @tommaso,

the reason is because you load jQuery too late (after jquery ui and after the theme main script that also throws an error in console)

please revise the minifier settings or theme script loading sequence to load jquery early
OR
remove the jquery ui script (<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>) inside to contact form and enqueue the script in this way:

function jquery_datepicker_scripts() {
    wp_enqueue_script( 'jquery-ui-datepicker', null , array( 'jquery' ), false );
}
add_action( 'wp_enqueue_scripts', 'jquery_datepicker_scripts' );

(this is the right way)

if you need any further information, don’t hesitate to ask

Hello @codekraft

thank you for your reply. I think this is beyond my skills. So, I should remove the jquery script from the code inside the contact form (this is clear), then I don’t understand how I should enqueue the script. Where? Do I need to place that script inside script.js of the theme? I tried pasting that code at the end of script.js but I guess I did not do the right thing, or at least it is still not working.

Thanks for your help!

Sorry I forgot to specify that code (“function jquery_datepicker_…”) need to be added at the end functions.php

You could want to install a plugin like this to add that code to your template without editing files directly from the WordPress backend.

Thanks. I did it but still not working ??

this code still needs to stay inside the contact form right?

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-lightness/jquery-ui.css">
<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{
     /* display: none; */
}
input[type="date"]::-webkit-calendar-picker-indicator {
  -webkit-appearance: none;
}
</style>

Yes but in your case (deferred scripts) you need to wait the page to load completely (or move the jquery script inside your js main script file). You can enable the datepicker script $("#datepicker").datepicker(... only after jquery and jquery-datepicker were loaded or you get “datepicker is not a function”.

replace the content of <script>:

window.addEventListener('load', function(){
  jQuery(function($){
  $("#datepicker").click(function(e){
       e.preventDefault();
  }).datepicker({
    dateFormat: "yy-mm-dd",
    beforeShowDay: function (date) {
      return date.getDay() == 2 ? [false, " disabled"] : [true, " enabled"];
    }
  });
  });
});

note:
– i’ve checked your test website but the jquery datepicker plugin seems not loaded.
– the grecaptcha script also has some issues

No luck on getting it to work. I guess there is some issue on my theme that needs to be solved first. Thanks for your effort!

yes the minification/optimisation of javascript files is creating a bit of troubles. check the browser console (with chrome f12) there are still a message about recaptcha

Hi

How can I disable the first two or 3 days after the form submission of the form?

Best regards
Istvan

ciao @wistvan,

the trick is in the line with ‘return date.getDay() == 2’… in the first example I used date.getDay() that returns the number of the day of the week (Wednesday was the number 2).
But we could also compare the date instead, so we can use Date with .getTime() that returns the day in epoch (in addition to correctly compare the date we need to get this midnight date -> new Date().setHours(0, 0, 0, 0))
– before the script can we need to create an array of days to exclude and then we would use indexof to verify that the day passed by beforeShowDay is not one of the excluded days
– you could exclude all days before today simply comparing thisDay > date.getTime() or vice versa

This is the script the snippet you need to add to your js file or by injecting that code into the form in this way

window.addEventListener('load', function(){
  jQuery(function($){
  var thisDay = new Date().setHours(0, 0, 0, 0);
  var excludedDays = [ 
    thisDay,
    thisDay - 864e5 , // yesterday 864e5 == 86400000 == 24*60*60*1000
    thisDay - 864e5 * 15, // two weeks ago
    thisDay + 864e5 * 3 // in three days
  ]; 
  $("#datepicker").click(function(e){
       e.preventDefault();
  }).datepicker({
    dateFormat: "yy-mm-dd",
    beforeShowDay: function (date) {
      console.log(date.getTime()); 
      return excludedDays.indexOf(date.getTime()) > -1 ? [false, " disabled"] : [true, " enabled"];
    }
  });
  });
});

• This reply was modified 2 years, 10 months ago by Erik. Reason: fix

Hi Erik!

Thank you so much for your prompt reply. I will let you know if I can make it work on my end.

Thank you
Istvan