0

Right now I have my calendar working and set up so that paste dates are disabled according from today's date. How can I also disable dates after 365 days from the current date?

fiddle: https://jsfiddle.net/ts8acmow/1/

var today = new Date();
var dd = today.getDate();
var mm = today.getMonth() + 1;
var yyyy = today.getFullYear();
 if(dd<10){
        dd='0'+dd
    } 
    if(mm<10){
        mm='0'+mm
    } 

today = yyyy+'-'+mm+'-'+dd;
document.getElementById("start").setAttribute("min", today);
anon001
  • 15
  • 4
  • 2
    The HTML element should let you set a min and max date as attributes, does that not work in this case? – bluemoon6790 Apr 25 '19 at 17:25
  • but I want it to update dynamically depending on the current date. ie: 365 days from todays date =4/25/2020 – anon001 Apr 25 '19 at 17:27
  • Possible duplicate of [Add year to todays date](https://stackoverflow.com/questions/33070428/add-year-to-todays-date) – imvain2 Apr 25 '19 at 17:29
  • You should be able to use JS to set the value of that attribute. – bluemoon6790 Apr 25 '19 at 17:29
  • can you update the fiddle? – anon001 Apr 25 '19 at 17:31
  • @imvain2 I think that it's a relevant difference from your linked question that OP doesn't just want to add a year in JS, but to set that calculated date as the max date for an input field. – bluemoon6790 Apr 25 '19 at 17:31
  • 1
    @bluemoon6790 I linked that because when you mentioned setting the min max date, the OP was more focused on the dynamic part and not the `max` field part. – imvain2 Apr 25 '19 at 17:33
  • Possible duplicate of [Restrict future dates in HTML 5 date input](https://stackoverflow.com/questions/23671407/restrict-future-dates-in-html-5-date-input) – APAD1 Apr 25 '19 at 17:33
  • yes I do not know how – anon001 Apr 25 '19 at 17:33
  • @imvain2 Fair enough. I was thinking about the HTML element when OP mentioned they want to "disable" invalid dates. – bluemoon6790 Apr 25 '19 at 17:36
  • I have already achieved the disable of past dates how I want it but I just now want to disable future dates one year from current date – anon001 Apr 25 '19 at 17:37

1 Answers1

3

It is really the same principle, but for the max attribute.

Here is how you could do it:

function fmt(dt) {
    return dt.toLocaleDateString("se"); // shortcut: Sweden locale has YYYY-MM-DD format
}

var today365 = new Date();
today365.setDate(today365.getDate()+365);

var start = document.getElementById("start");
start.setAttribute("min", fmt(new Date()));
start.setAttribute("max", fmt(today365));
<input type="date" id="start">
trincot
  • 317,000
  • 35
  • 244
  • 286
  • that doesn't work, that still allows me to go further than a year from today. also past dates have to stay disabled – anon001 Apr 25 '19 at 17:35
  • The way `min` and `max` attributes work is not to block, but to indicate the invalid entry with a visual indication, like a red border. I thought that was what you wanted, as you stated in your question that you got it working for past dates. This is just the same principle, so I don't understand why you see a problem here. – trincot Apr 25 '19 at 17:43
  • because I don't know how to disable the future dates so only 1 year from today is allowed to be chosen from – anon001 Apr 25 '19 at 17:44
  • If you add: `start.addEventListener("change",function(){ if(this.max < this.value){ this.value = this.max; } });` it will set the field's value to the max value if a date is greater than the max date is selected. – imvain2 Apr 25 '19 at 17:47
  • In your fiddle also past dates can be *selected* (using the arrows in Chrome, or the popup in FF) , so then I don't understand why you start your question by stating that it disables past dates if yet it is not what you want. On the other hand, in the popup calendar (in FF) the dates beyond one year are greyed out as intended, just like those before today's date. – trincot Apr 25 '19 at 17:49