Set date input field's min and max 30days date to today

I just have a simple line of code like this:
Is there a way to get disable the following range using the local date?


<input type='date' min='2023-06-02' max='2023-07-02'></input>


Is there a simple way to set the min date to "today" and set the max date to +30 days? Or do I have to use Javascript to do this?

example date the can be selected will be todays date to +30 days of the following date

With javascript, first, you need to get today's date by

const [today] = new Date().toISOString().split('T')

Then get the max date

  const maxDate = new Date();
  maxDate.setDate(maxDate.getDate() + 30);
  const [maxDateFormatted] = maxDate.toISOString().split('T');

Then set the min and max attributes.

  const dateInput = document.getElementById('myDateInput');
  dateInput.setAttribute('min', today);
  dateInput.setAttribute('max', maxDateFormatted);

This is working example

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const [today] = new Date().toISOString().split('T');

const maxDate = new Date();
maxDate.setDate(maxDate.getDate() + 30);
const [maxDateFormatted] = maxDate.toISOString().split('T');

const dateInput = document.getElementById('myDateInput');
dateInput.setAttribute('min', today);
dateInput.setAttribute('max', maxDateFormatted);

<!-- language: lang-html -->

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

<!-- end snippet -->