英文:
Set date input field's min and max 30days date to today
问题
我只有这样简单的一行代码：
有没有办法使用本地日期禁用以下范围？
<input type='date' min='2023-06-02' max='2023-07-02'></input>
有没有简单的方法将最小日期设置为“今天”，并将最大日期设置为+30天？还是我必须使用JavaScript来做这个？可以选择的示例日期是从今天到下一个日期的+30天。
英文:
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
答案1
得分: 1
使用JavaScript，首先需要通过以下方式获取今天的日期：
const [today] = new Date().toISOString().split('T');
然后获取最大日期：
const maxDate = new Date();maxDate.setDate(maxDate.getDate() + 30);const [maxDateFormatted] = maxDate.toISOString().split('T');
接下来，设置 min 和 max 属性：
const dateInput = document.getElementById('myDateInput');dateInput.setAttribute('min', today);dateInput.setAttribute('max', maxDateFormatted);
这是一个工作示例：
<!-- 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 -->
英文:
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 -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论