Unable to set the Min Date

Question

 var todaysDate = new Date(); // Gets today's date
  
  // Max date attribute is in "YYYY-MM-DD".  Need to format today's date accordingly
  
  var year = todaysDate.getFullYear();                      // YYYY
  var month = ("0" + (todaysDate.getMonth() + 1)).slice(-2);    // MM
  var day = ("0" + (todaysDate.getDate()+3)).slice(-2);         // DD

  var minDate = (year +"-"+ month +"-"+ day); // Results in "YYYY-MM-DD" for today's date 
  
  // Now to set the MIN date value for the calendar to be today's date
  document.getElementById("dateField").setAttribute("min", minDate);

<input type="date" id="dateField">

I am trying to set the disable the 3 upcoming days in in HTML date picker with a gap of today to 3 days. I am able to achieve this except if its 30th of March today, it has to go for the next month. in that case all dates are enabled. if its 25th of march it works fine. the upcoming dates are disabled. Where I am making the mistake. My code snippet is below.

  var todaysDate = new Date(); // Gets today's date
  
  // Max date attribute is in "YYYY-MM-DD".  Need to format today's date accordingly
  
  var year = todaysDate.getFullYear();                      // YYYY
  var month = ("0" + (todaysDate.getMonth() + 1)).slice(-2);    // MM
  var day = ("0" + (todaysDate.getDate()+3)).slice(-2);         // DD

  var minDate = (year +"-"+ month +"-"+ day); // Results in "YYYY-MM-DD" for today's date 
  
  document.getElementById("dateField").setAttribute("min", minDate);

Also, is it possible just in case if I want to disable weekends from the upcoming three days? Thanks very much.

Edited as per Tiago's Answer

  Date.prototype.addDays = function(days) {
      var date = new Date(this.valueOf());
      date.setDate(date.getDate() + days);
      return date;
  }

  var date = new Date();

  console.log(date.addDays(3));
  var dist = date.addDays(3) 
  
  var year = dist.getFullYear();
  var month = dist.getMonth() + 1;
  var day = dist.getDate();

  var distdate = (year +'/'+ month +'/'+ day);
  console.log(distdate);

  document.getElementById("dateField").setAttribute("min", distdate );

Now I am getting the exact date when the date is added except it is not getting set as min.

a.mola · Accepted Answer · 2021-03-15T11:35:37.857

1

Here's how I did it.

I converted the extra dates into milliseconds, added it to today's date and made a new Date Instance from that.

You should learn about padStart. It fills up the string to the required length 1st argument, with whatever is passed into the 2nd argument

const addDate = 3; //Converted these extra days to milliseconds and added it to today's date
const min = new Date(Date.now() +  (addDate * (24 * 60 * 60 * 1000)));
const year = min.getFullYear();
const month = (min.getMonth() + 1).toString().padStart(2, '0');
const day = min.getDate().toString().padStart(2, '0');

const minDate = `${year}-${month}-${day}`; // Results in "YYYY-MM-DD" for today's date 

// Now to set the MIN date value for the calendar to be today's date
document.getElementById("dateField").setAttribute("min", minDate);
document.getElementById("minText").innerText = `Min Date: ${minDate}`;

input[type=date]:valid {
  border-color: green;
}

input[type=date]:invalid {
  border-color: red;
}

<input type="date" id="dateField" required>
<span id="minText"></span>

edited Mar 15 '21 at 11:35

answered Mar 15 '21 at 09:43

a.mola

3,883
7
23

its simple and very understandable. But when you set it to HTML min attribute, no changes at all. – Roshan Zaid Mar 15 '21 at 11:15
I will add CSS so if it is invalid you'll see the style – a.mola Mar 15 '21 at 11:17
No Mola, the thing is if its within 3 days, it should disable the dates. it shouldn't allow you to select the disabled date at all. – Roshan Zaid Mar 15 '21 at 11:19
That's why I want to add the HTML datepicker min attribute which makes disabling the dates. – Roshan Zaid Mar 15 '21 at 11:20
So the allowed dates start from the next three days. except when its a new month? – a.mola Mar 15 '21 at 11:22
Like from today till 18th should be disabled – a.mola Mar 15 '21 at 11:22
correct. example if its march 30, the next 3 should be disabled. so April 2 will be allowed. – Roshan Zaid Mar 15 '21 at 11:23
Will past dates before today be allowed? Like 13th or 12th – a.mola Mar 15 '21 at 11:27
Past dates are not a concern Mola. it can be allowed or not allowed that's fine. The only concern is future dates. – Roshan Zaid Mar 15 '21 at 11:30
You can check the snippet now – a.mola Mar 15 '21 at 11:36
I am working on too. Wherever I try its a dead end. Changed the date format, as Tiago's answer tried the addDays method but it is not updating the MIN date attribute. – Roshan Zaid Mar 15 '21 at 11:36
You're the best Mola.Thanks. I am working on how to skip the count of weekends. – Roshan Zaid Mar 15 '21 at 11:41
Okay then... Good Luck. Don't forget to upvote and mark as the correct answer:D – a.mola Mar 15 '21 at 11:43
I have checked padStart. instead of that I was trying ("0" + todaysDate.getDate()).slice(-2); I found out what both does. Your logic with padstart is exactly what I needed. – Roshan Zaid Mar 15 '21 at 11:45
Cool... Glad you like that too – a.mola Mar 15 '21 at 11:47
Thanks. is there any logic you aware in order to exclude the weekends from these disabled dates Mola? I mean if there is a weekend falls on within 3 days, it should be skipped. – Roshan Zaid Mar 15 '21 at 12:19
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/229935/discussion-between-a-mola-and-roshan-zaid). – a.mola Mar 15 '21 at 12:45
@RoshanZaid Let us continue this [discussion in chat](https://chat.stackoverflow.com/rooms/230959/discussion-between-a-mola-and-roshan-zaid) – a.mola Apr 09 '21 at 19:53

score 0 · Answer 2 · answered Mar 15 '21 at 09:45

0

var day = ("0" + (todaysDate.getDate()+3)).slice(-2); returns 34 if today is 30th Mar

In this case, you can use setDate function of Date object to calculate the minDate value:

var minDate = new Date(); // Gets today's date
minDate.setDate(minDate.getDate() + 3); // right here
// update min setting
document.getElementById("dateField").min = todaysDate.toISOString();

answered Mar 15 '21 at 09:45

hoangdv

15,138
4
27
48

I tried this hoangdv, I am unable to see any changes. – Roshan Zaid Mar 15 '21 at 09:58

Unable to set the Min Date

2 Answers2