How to restrict certain Days from DatePicker in Lightning web component (LWC)?

Question

I want to disable certain days from a datepicker like weekends. I've read that it's possible using Jquery but I couldn't find any documentation related to LWC.

Thanks, Kamal

Answer 1

Realistically, you can only choose min/max dates with the default picker, and even then, it doesn't restrict selection, it simply shows an error. Instead, you could use an onchange handler to check if the selected date is a weekend, and use setCustomValidity to indicate an error if a weekend is selected.

handleDateInputChange(event) {
  const date = new Date(event.target.value);
  const dayOfWeek = date.getDay();
  if(dayOfWeek === 0 || dayOfWeek === 6) {
    event.target.setCustomValidity('You cannot select a weekend date.');
  } else {
    event.target.setCustomValidity('');
  }
  event.target.reportValidity();
}