How to disable previous days from today

Question

I would like to request assistance on how I can show a specific dates on my date picker, blocking the weekends and disable the previous days from today.

Month shown only: June and July
Days: June 1 to July 31
Disable the weekends
Disable the previous days from today

<input id="date1" type="date" min="2021-06-01" max="2021-07-31" name="APPOINTMENTDATE" data-field-type="Text">

<script>
const picker = document.getElementById('date1');
picker.addEventListener('input', function(e){
  var day = new Date(this.value).getUTCDay();
  if([6,0].includes(day)){
    e.preventDefault();
    this.value = '';
    alert('Weekends not allowed');
  }
});
</script>

Answer 1

Not sure if you want jQuery UI datepicker. Here is how to do this using the plugin. You can use maxDate and minDate to get your range, and beforeShowDay with datepicker.noWeekends to disable all weekends. minDate set to 0 will disable all days before today.

EDIT: added a better option that will not change with the current time for maxDate.

Then set a variable up for date, month and year, get each using a new Date() obj:

const date = new Date();
const year = date.getFullYear();
const month = date.getMonth();

Then you can set your maxDate to new Date(year, month+1, '31').

$(document).ready(function() {
  $(function() {
    const date = new Date();
    const year = date.getFullYear();
    const month = date.getMonth();
    $("#cal").datepicker({
      beforeShowDay: $.datepicker.noWeekends,
      maxDate: new Date(year, month + 1, '31'),
      minDate: 0,
    });
  });
})

.ui-datepicker {
  background-color: #fff;
}

.ui-datepicker-header {
  background-color: #616eff;
  font-family: 'Teko', sans-serif;
  font-size: 2rem;
}

.ui-datepicker-title {
  color: #1d1d1d;
}

.ui-widget-content .ui-state-default {
  font-family: 'Teko', sans-serif;
  font-size: 1.5rem;
  border: 0;
  text-align: center;
  background: #fff;
  font-weight: normal;
  color: #000;
}

.ui-widget-content .ui-state-default:hover {
  border: 0;
  text-align: center;
  background: #000;
  font-weight: normal;
  color: #eee;
  box-shadow: 0px 0px 4px #000;
  transform: scale(1.1);
  transition: transform .15s;
}

.ui-widget-content .ui-state-active {
  border: 0;
  background: #616eff;
  color: #fff;
  box-shadow: 0px 0px 4px #000;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
</script>

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Teko:wght@300&display=swap" rel="stylesheet"> Date: <input id="cal" type="text" name="APPOINTMENTDATE" data-field-type="Text">

For a native datepicker with HTML 5 you can create an array of months and the use const date = new Date; const now = date.now(), then you can format the string to match that which the min attribute will take => yyyy-mm-dd. Then use JS to place the string into your min attribute.

Then to handle the weekends, use your current code, however, instead of a pesky alert, create a span tag and append it to the parent element and place it next to your input with a warning and styling indicative to a warning. Use a timeout to remove the tooltip once the animation fades.

const months = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12']
const now = new Date()
const formattedDate = now.getFullYear() + '-' + months[now.getMonth()] + '-' + now.getDate()

document.getElementById('date').min = formattedDate

document.getElementById('date').addEventListener('input', function(e) {
  var day = new Date(this.value).getUTCDay();
  if ([6, 0].includes(day)) {
    e.preventDefault();
    this.value = '';
    
    const tooltip = document.createElement('SPAN')
    tooltip.classList.add('tooltip')
    tooltip.textContent = "Sorry weekends are not available!"
    e.target.parentNode.append(tooltip)
    setTimeout(() => {
      e.target.parentNode.querySelector('.tooltip').remove()
    },3000)
    
  }
})

.warning {
  background-color: pink;
  color: darkred;
}

.parent {
  position: relative;
}

.tooltip {
  background-color: pink;
  position: absolute;
  left: 130px;
  padding: .2rem .5rem;
  border-radius: .3rem;
  animation: fade 3s ease-in-out;
  opacity: 0;
  border: 1px solid darkred;
}

.tooptip::before {
  content: '';
  width: 10px;
  height: 10px;
  left: 20px;
  top: 10px;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;   
  border-right:10px solid pink; 
  position: absolute;
}

@keyframes fade {
  0%{
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

<div class="parent">
  <input id="date" type="date" min="" max="2021-07-31" name="APPOINTMENTDATE" data-field-type="Text">
</div>

Answer 2

You can compare the selected date with today's date and show alert in case if it prior to today's date.

const picker = document.getElementById('date1');
picker.addEventListener('input', function(e){
  var day = new Date(this.value).getUTCDay();
  e.preventDefault();
  const selectdDay = new Date(this.value).setHours(0,0,0,0);
  const today = new Date(new Date().setHours(0,0,0,0));
  if(selectdDay < today) {
    this.value = "";
    alert('Previous day is not allowed');
  }
  if([6,0].includes(day)){
    this.value = '';
    alert('Weekends not allowed');
  }
});

<input id="date1" type="date" min="2021-06-01" max="2021-07-31" name="APPOINTMENTDATE" data-field-type="Text">

Answer 3

Actually you must set min attribute to today Date.

Try this one for Disable the previous days from today :

 var today = new Date().toISOString().split('T')[0];
 document.getElementById("date1").setAttribute('min', today);

var today = new Date().toISOString().split('T')[0];
document.getElementById("date1").setAttribute('min', today);

alert("min Data " + today)

    <input id="date1" type="date" min="2021-06-01" max="2021-07-31" name="APPOINTMENTDATE" data-field-type="Text">


    

Answer 4

a built-in function of datepicker for no weekend days selection.

set minDate equals today, so that there is selection before this date allowed.

$(".selector").datepicker({ 
   beforeShowDay: $.datepicker.noWeekends,
   //set today's Date as minDate,  
   minDate: new Date() 
})

Answer 5

This is a way u can stop users from selecting yesterday. But didn't see any way to disable the user from selecting those dates with the HTML date picker. But u can use jQuery to achieve this, here is a resource showing that.

<input id="date1" type="date" min="2021-06-01" max="2021-07-31" name="APPOINTMENTDATE" data-field-type="Text">

<script>
  const picker = document.getElementById('date1');

  picker.addEventListener('input', function(e){

    let errorMessage;

    const day = new Date(this.value).getUTCDay();
    
    if([6,0].includes(day)) {
      errorMessage = 'Weekends not allowed';
    }

    const dateStr = new Date(this.value).toLocaleDateString();
    const yesterdayStr = new Date((new Date()).valueOf() - 1000*60*60*24).toLocaleDateString();

    if(dateStr === yesterdayStr) {
      errorMessage = 'Choosing yesterday is not allowed';
    }

    if(errorMessage) {
      e.preventDefault();
      this.value = '';
      alert(errorMessage);
    }
  });