在 HTML 5 輸入類型日期上禁用周末
[英]Disable Weekends on HTML 5 input type date
問題描述
是否可以禁用 HTML 5 輸入類型日期的所有周末？
<input id="date1" size="60" type="date" format="MM/DD/YYYY" placeholder="MM/DD/YYYY" />
3 個解決方案
解決方案1
2 2019-06-24 13:52:47
僅適用於HTML 5輸入類型日期，這是不可能的。
您可以使用flatpickr替代：（ https://chmln.github.io/flatpickr/examples/#disabling-specific-dates ）
它看起來更好，也可以做你想要的！
在文檔中提到了一個名為disable的屬性，可用於刪除周末。
{
"disable": [
function(date) {
return (date.getDay() === 0 || date.getDay() === 6);
}
],
"locale": {
"firstDayOfWeek": 1 // start week on Monday
}
}
完整的工作示例：
$("#date1").flatpickr({ enableTime: true, dateFormat: "mdY", "disable": [ function(date) { return (date.getDay() === 0 || date.getDay() === 6); // disable weekends } ], "locale": { "firstDayOfWeek": 1 // set start day of week to Monday } });
<html> <head> <title>Using Flatpickr</title> <!-- Flatpicker Styles --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.2.3/flatpickr.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.2.3/themes/dark.css"> </head> <body> <input id="date1" placeholder="MM/DD/YYYY" data-input /> <!-- jQuery --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!-- Flatpickr --> <script src="https://cdnjs.cloudflare.com/ajax/libs/flatpickr/4.2.3/flatpickr.js"></script> </body> </html>
解決方案2
2 2019-06-24 14:08:58
請檢查一天。 如果是周末，您可以重置該值並告訴用戶選擇其他內容。
const picker = document.getElementById('date1'); picker.addEventListener('input', function(e){ var day = new Date(this.value).getUTCDay(); if([6,0].includes(day)){ e.preventDefault(); this.value = ''; alert('Weekends not allowed'); } });
<input id="date1" size="60" type="date" format="MM/DD/YYYY" placeholder="MM/DD/YYYY" />
解決方案3
0 2021-12-31 13:18:36
某些瀏覽器（例如 Chrome）會在您使用箭頭或選擇其他月份時設置日期
為了避免這個問題，我發現setCustomValidity方法對我的用例比重置輸入值更有用。
下面是一個例子。 在表單提交時，如果選擇了周末，表單將不會實際提交並顯示錯誤。
const picker = document.getElementById('date1'); picker.addEventListener('change', function(e){ var day = new Date(this.value).getUTCDay(); if([6,0].includes(day)){ e.target.setCustomValidity('week-end not allowed') } else { e.target.setCustomValidity('') } });
<input id="date1" size="60" type="date" format="MM/DD/YYYY" placeholder="MM/DD/YYYY" />
為 HTML 禁用日期選擇器 5 Input type='date'
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.