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"]
Hey Erik,
Great post with and a great solution.
I do have one problem when implementing this solution, on mobile screen sizes the styling is completely off, how did you fixed that?
if you see it completely off the screen, it is possible that jquery cannot position the calendar below the input (it is an element at the end of the html that is positioned below the input with position absolute).
I found this article https://www.hongkiat.com/blog/jquery-ui-datepicker/, that explains well how to style the calendar but if you have any problems send me the link to your form and I’ll try to figure out what the problem is (if I can of course) bye!