How to disable/exclude specific day in date-picker

hi @markvdam

try this:

$("#datepicker").datepicker({
  beforeShowDay: function(date) {
    var day = date.getDay();
    return [(day != 2)];
  }
});

example -> https://codepen.io/erikyo/pen/ZEedEWB

• This reply was modified 3 years, 4 months ago by Erik.

Hi Erik,

Thanks for your quick reply and I appreciate the time you’re taking to help me out. Maybe I’m doing something wrong but I’m still able to select any Tuesdays in the date-picker with the code you provided. Also on your example page I’m able to select Tuesdays. Am I doing something wrong maybe?

I’ve put your code within the contact form itself (using <script> tags), instead of the JS file.

Thanks and kind regards,
Mark

sorry mark was mine fault! you need to set the dateformat to fit form/locale format

$("#datepicker").datepicker({
  dateFormat: "yy-mm-dd",
  beforeShowDay: function (date) {
    return date.getDay() == 2 ? [false, ".disabled"] : [true, ".enabled"];
  }
});

Hi Erik,

Thanks again! Your code works like a charm in your example on codepen, but I can’t get it to work on my website. I’ve put the code at the beginning of the reservation form page, like this:

<script type=”text/javascript”>
$(“#datepicker”).datepicker({
dateFormat: “yy-mm-dd”,
beforeShowDay: function (date) {
return date.getDay() == 2 ? [false, ” disabled”] : [true, ” enabled”];
}
});
</script>

But the form still displays the datepicker as usual, including the Tuesdays and I’m able to submit the form with a Tuesday selected. I tried in with Safari (OSX), Chrome (OSX) and an iPhone.

Any suggestions? Thanks for the help. Much appreciated:-)

Kind regards,
Mark

hi @markvdam
I need to check your website to understand the reason.

It could be:
– the id that reference the datepicker (in the example i use the id “datepicker”)
– depends on your loading path you may need to wrap the script with

$(window).on('load', function() {
 // THE CODE
});

– scripts not loaded at all or wrongly (check the console, f12)
…

Hi Erik,

Thanks again. I tried putting the code within the wrapper you just provided, but unfortunately without success. Probably I’m just making a rookie mistake..

I would appreciate the help. Can I sent you a DM somehow to provide you with a temporary username and password so you can take a look?

Kind regards,
Mark

no because isn’t permitted (https://www.ads-software.com/support/guidelines/#the-bad-stuff), and besides so in this case I would be of help to you only…

please check:
– if jquery and jqueryui are loaded correctly
– list the plugin installed in that wordpress installation

if you can’t share the link to your website, you could create a dummy installation of WordPress with the same theme and plugins.

I thought it was an interesting question and prepared an example on my blog
https://modul-r.codekraft.it/2021/07/datepicker/

I have changed a few things try now!
whole form code:

[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{
     /* display: none; */
}
input[type="date"]::-webkit-calendar-picker-indicator {
  -webkit-appearance: none;
}
</style>
[submit "Submit"]

Hi Erik,

Thanks again for all the effort you’re putting into this! The datepicker works, however there are two small issues still. Maybe you can help me figure what’s going wrong.

First, the Saturday’s are falling outside the datepicker ‘grid’. Check https://ibb.co/0hXwfwH for a screenshot or you can find the original page here: https://www.cafededokter.nl/reserveren/

Second, on iPhones the default iOS (i think?) datepicker is showing up first. You can select any Tuesdays, but after using the default datepicker, your datepicker pops up and the Tuesdays are greyed out like it should.

Any suggestions on this? Most likely the first has to do with the theme styling sheets. I can approach them to check if they have specific CSS set for the datepicker somewhere.

Kind regards and thanks again,
Mark

this rule is overriding the datepicker table:

*:not(.gem-table):not(.cart_totals)>table:not(.shop_table):not(.group_table):not(.variations) th {
    /* padding: 5px 10px; */
}

(my advice is to edit this rule because “*:not()… td” is a bit aggressive way to style tables)

if needed, can rewrite that rule in this way

#ui-datepicker-div td {
    padding: 0;
}

about ios I need to check deeply it was supposed that line

$("#datepicker").click(function(e){
     e.preventDefault();

was enough to prevent the default datepicker from opening… but wasn’t.

Hi Erik,

I’ve placed this code

#ui-datepicker-div td {
    padding: 0;
}

in the custom CSS area which overwrites the normal CSS file. This works like a charm! Thank you so much:-)

Regarding the default datepicker i found the following solution which works for me if you check https://www.cafededokter.nl/reserveren/ on your phone. I changed your input type from “date” to “text” and added the readonly attribute:

[text* your-date id:datepicker readonly placeholder "Datum*"]

I noticed your piece of CSS

input[type="date"]::-webkit-calendar-picker-indicator {
  -webkit-appearance: none;
}

which refers to “date” input type. It does not seem to influence the form in any way but maybe you can clarify this?

Once again thanks for all your help!

Kind regards,
Mark

Just one more question. If they want to disable another day in the future, let’s say Monday and Tuesday. How would that affect the javascript you provided?

Kind regards,
Mark

it’s the native calendar picker and it’s inside the input type=”data” shadow dom

View post on imgur.com

about -webkit-calendar-picker-indicator you can find some info here
https://trac.webkit.org/wiki/Styling%20Form%20Controls#Dateinputtype

Doesn’t work on mobile – this is the reason on safari you got issues I suppose
—
to change the day
return date.getDay() == 2 ? [false, ” disabled”] : [true, ” enabled”];
with
return ( date.getDay() === 1 || date.getDay() === 5 ) ? [false, ” disabled”] : [true, ” enabled”];
where the number is the day of the week starting from 0 sunday

ref. https://api.jqueryui.com/datepicker/#option-beforeShowDay

—
tested work on android v10 – chrome

Hi Erik,

Sorry for the long wait. I was enjoying some family time for a couple of days. Thank you for all your effort, input and references. I’ve learned a lot and it now works the way we wanted to:-)

Have a nice day and thanks again!

Mark

Hello Erik,
I have the same need and tried to apply your code, however it is not working. I am probably doing something wrong but I don’t understand what. Maybe is the date format?
https://www.castellidelgrevepesa.it/prenota-un-wine-tour/

Thanks

Tommaso