Only enable during 2 weeks date format html

Question

I have a problem enabling only during 2 weeks data format. For example, I want only to show today and before 14 days. Now my coding just can lock before days.

Scenario:

If today 03 Feb 2021, I want to enable dates are 20 Jan 2021 until 03 Feb 2021. Other dates will be disabled.

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

<input type="date" class="form-control" id="accident" name="accident" value="" title="Date of Accident">

Now my result like below the picture:

Hope someone can guide me on which part I am getting wrong it. Thanks.

Your method for getting *today* will return the UTC date, not the current local date so will be tomorrow for users with a -ve offset and yesterday for those with a +ve offset for the period of their local offset from midnight. — RobG, Feb 03 '21 at 08:16

Eduardo Resende · Answer 1 · 2021-02-03T03:54:14.827

According to MDN Documentation. You need to set min and max values to specify an interval

// Get date objects
const today = new Date();
const twoWeeksAgo = new Date();

twoWeeksAgo.setDate(today.getDate() - 14);

// Then set in input
const input = document.querySelector('[name=accident]');

input.setAttribute('min', twoWeeksAgo.toISOString().slice(0, 10));
input.setAttribute('max', today.toISOString().slice(0, 10));

<input type="date" name="accident" />

Ian · Answer 2 · 2021-02-03T04:03:04.863

You only set min, but you did not set max.

Because of this relationship, it only knows your minimum date, but does not know your maximum date, so the previous result is normal, as long as you make up the setting, it will work.

For details, please refer to here.

const getDateStr = (d) => d.toISOString().split('T')[0];

const daysRange = (days) => {
  const d = new Date();
  const when = new Date(d.setDate(d.getDate() + days));
  return [new Date(), when].map(m=>getDateStr(m));
};

const limit = daysRange(-14);
const picker = document.getElementsByName("accident")[0];

picker.setAttribute('min', limit[1]);
picker.setAttribute('max', limit[0]);
picker.setAttribute('value', limit[0]);

label {
    display: block;
    font: 1rem 'Fira Sans', sans-serif;
}

input,
label {
    margin: .4rem 0;
}

<label for="start">date:</label>

<input type="date" name="accident">

score 0 · Accepted Answer · answered Feb 03 '21 at 03:43

The solution you're looking for is something like this,

const twoWeeksAgo = 14 * 24 * 60 * 60 * 1000;
let dateElement = document.querySelector('#accident');
dateElement.min = new Date(Date.now() - twoWeeksAgo).toISOString().split('T')[0];
dateElement.max = new Date().toISOString().split('T')[0];

<input type="date" class="form-control" id="accident" name="accident" value="" title="Date of Accident">

You can use the max and min attributes of the HTML5 date element (documented here) to restrict your element to only show certain values.

In this particular case, the min attribute is set to the date (in yyyy-mm-dd format) two weeks ago and the max attribute is set to the current date.

The magic computation twoWeeksAgo is the number of milliseconds in 14 days which will allow you to compute the date 14 days ago.

The code new Date(Date.now() - twoWeeksAgo) gives us a Date object set to two weeks ago and the .toISOString() function returns the date in YYYY-MM-DDTHH:mm:ss.sssZ format, i.e., a date-time string.

Since the min attribute only requires the date and not the time, we then split the obtained string using 'T' as a delimiter, which would give us the date in YYYY-MM-DD format.

Putting it all together we get this line for the date two weeks ago

dateElement.min = new Date(Date.now() - twoWeeksAgo).toISOString().split('T')[0];

And similarly for the upper limit date,

dateElement.max = new Date().toISOString().split('T')[0];

Adjusting the time value to add or subtract days is flawed, see [*Add days to JavaScript Date*](https://stackoverflow.com/questions/563406/add-days-to-javascript-date). As for the OP, using *toISOString* returns the UTC date, so may return yesterday, today or tomorrow depending on system settings and when it's run. — RobG, Feb 03 '21 at 08:20

Only enable during 2 weeks date format html

3 Answers3