How can I use input type date to dynamically only allow for one year from current date?

Question

Here is my code so far. I am not sure how to accomplish a max date other than setting that in the input tag itself. I want it to be dynamic so whatever the current date is, the calendar only allows a selection of up to one year.

<input type="date" id="txtDate" />

$(function(){
    var dtToday = new Date();

    var month = dtToday.getMonth() + 1;
    var day = dtToday.getDate();
    var year = dtToday.getFullYear();
    if(month < 10)
        month = '0' + month.toString();
    if(day < 10)
        day = '0' + day.toString();

    var maxDate = dtToday + 365;
    alert(maxDate);
    $('#txtDate').attr('max', maxDate);
});

example: today is 10/1/2019 it should be allowed to only select dated from 10/1/2019-10/1/2020 tomorrow a user should be allowed to only select from 10/2/2019-10/2/2020 link to fiddle

Possible duplicate of [Restrict future dates in HTML 5 date input](https://stackoverflow.com/questions/23671407/restrict-future-dates-in-html-5-date-input) — Shaya Ulman, Oct 01 '19 at 19:39
@ShayaUlman this doesn't appear to be a duplicate. The question is about setting a dynamic end date — ControlAltDel, Oct 01 '19 at 19:43
@ControlAltDel yes exactly. I only want to allow a date selection from the current date + 1 year from the current day — Abigail, Oct 01 '19 at 19:45
Here you go: http://jsfiddle.net/khrismuc/qf32ync0/ (it *is* a dupe of that question btw, but the accepted answer doesn't use good practice to create the `max` string) — , Oct 01 '19 at 19:55
@ControlAltDel, the [accepted answer](https://stackoverflow.com/a/23671540/10679649) over there seems to answer this question, how is about that? — Shaya Ulman, Oct 01 '19 at 19:57
yeah that is perfect, but how do I disallow for all dates starting before current date? — Abigail, Oct 01 '19 at 20:00
@Abigail just set minDate with the day, month, year of new Date() — ControlAltDel, Oct 01 '19 at 20:21

score 0 · Answer 1 · answered Oct 01 '19 at 19:41

0

Just add a year to the current date

var dtToday = new Date();
dtToday.setYear(dtToday.getYear() + 1);

answered Oct 01 '19 at 19:41

ControlAltDel

33,923
10
53
80

I also dont want the ability to have a date get selected if it is before the current date or over one year past the current date – Abigail Oct 01 '19 at 19:47

score 0 · Answer 2 · edited Oct 02 '19 at 01:49

0

$(function(){
  var dtToday = new Date();
  dtToday.setFullYear(dtToday.getFullYear() + 1)
  let formatted_date = dtToday.getFullYear() + "-" + (dtToday.getMonth() + 1) + "-" + dtToday.getDate()
  alert(formatted_date);
  $('#txtDate').attr('max', formatted_date);
});

edited Oct 02 '19 at 01:49

showdev

28,454
37
55
73

answered Oct 01 '19 at 19:44

James Dullat

67
4

but how can I disallow the selection of a date past 1 year from current date? – Abigail Oct 01 '19 at 19:46
Just subtract 1 instead of adding and set attribute min: like this – James Dullat Oct 01 '19 at 19:47
@Abigail If you wanna disallow past dates then set min = current date – James Dullat Oct 01 '19 at 19:51
But wouldnt that be a static min date? I want it to update dynamically as the days go on – Abigail Oct 01 '19 at 19:53
5

Code-only answers are considered low quality: @James Dullat - make sure to provide an explanation what your code does and how it solves the problem. – help-info.de Oct 01 '19 at 21:12
Thanks @help-info.de for letting me know – James Dullat Oct 02 '19 at 13:11

score 0 · Accepted Answer · answered Oct 02 '19 at 00:43

Setting the min and max values for a date input based on today's date can be done when the page loads:

// Formt date as YYYY-MM-DD
function formatISOLocal(d) {
  let z = n => ('0' + n).slice(-2);
  return d.getFullYear()+'-'+z(d.getMonth()+1) + '-' + z(d.getDate());
}

window.onload = function() {
  let inp = document.querySelector('#i0');
  let d = new Date();
  inp.min = formatISOLocal(d);
  inp.defaultValue = inp.min;
  d.setFullYear(d.getFullYear() + 1);
  inp.max = formatISOLocal(d);
  // Debug
  console.log(inp.outerHTML);
}

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

If the user agent doesn't support input type date, this will still set the min/max/default values, but you'll have to handle out of range values yourself.

hey is there a way to use this script for more than one date type input fields? http://jsfiddle.net/eLp8n9d6/5/ — Abigail, Oct 02 '19 at 17:27
Yes. If you have another question, post it as a question. ;-) — RobG, Oct 03 '19 at 02:42

score -1 · Answer 4 · answered Oct 01 '19 at 19:38

-1

You can't add to a date object like that; you need to first get it as a timestamp. You can do that by using Date.now() or, if you need the Date object, dtToday.getTime().

That gives you a timestamp in milliseconds, so you also need to convert 365 days into milliseconds; meaning you want to add 365 * 24 * 60 * 60 * 1000 to it, not just 365.

answered Oct 01 '19 at 19:38

IceMetalPunk

5,476
3
19
26

thank you that makes sense but can you update fiddle please? – Abigail Oct 01 '19 at 19:41
You can add either days or milliseconds to a date. The simplest way is to add 1 year, which takes account of leap years too (provided you accept the ECMAScript rules for adding a year to 29 February): `date.setFullYear(date.getFullYear() + 1)`. – RobG Oct 02 '19 at 00:33

How can I use input type date to dynamically only allow for one year from current date?

4 Answers4

Linked