常用的ui组件不支持日月的这种形式,产品提成要用input框的形式来做,且对输入字符串是否符合时间格式做校验,写起来还是很麻烦的,记录一下以后备用。
<script>
/**
* 校验是否是合法日期字符串
* 支持格式:
* 2024年4月或2024年4月28日、
* 2024-4或2024-4-28、
* 2024.4或2024.4.28、
* 2024/4或2024/4/28、
* 202404或20240428
*/
function isValidDateFormat(dateString) {
// 定义正则表达式以匹配不同的日期格式
// 可能还要支持1位数的情况
const regexes = [
// 中文格式
/^(\d{4})年(\d{1,2})月(\d{1,2})日$/,
/^(\d{4})年(\d{1,2})月$/,
// 带分隔符
/^(\d{4})(?:[-.\/])(\d{1,2})\2(\d{1,2})$/,
/^(\d{4})[-.\/](\d{1,2})$/,
// 无分隔符
/^(\d{4})(\d{1,2})(\d{1,2})?$/,
]
for (const regex of regexes) {
const match = regex.exec(dateString)
if (match) {
// 提取年份、月份和日(如果存在)
const [, yearStr, monthStr, dayStr] = match
console.log(yearStr,monthStr,dayStr)
const year = parseInt(yearStr, 10)
const month = parseInt(monthStr, 10)
const day = dayStr ? parseInt(dayStr, 10) : 1 // 默认日为1,如果只有年月
// 校验月份和日的范围
if (month < 1 || month > 12) return false
if (dayStr) {
// 对于有日的格式,需要校验日是否在合理范围内
const daysInMonth = new Date(year, month, 0).getDate() // 获取该月有多少天
if (day < 1 || day > daysInMonth) return false
}
// 如果所有校验都通过,则认为是有效日期
return true
}
}
// 如果没有任何正则表达式匹配,则认为是无效日期
return false
}
// 常规测试
console.log('常规测试')
console.log('2024年4月',isValidDateFormat('2024年4月'))
console.log('2024年4月28日',isValidDateFormat('2024年4月28日'))
console.log('2024-4-28',isValidDateFormat('2024-4-28'))
console.log('2024.4',isValidDateFormat('2024.4'))
console.log('2024.4.28',isValidDateFormat('2024.4.28'))
console.log('2024/4',isValidDateFormat('2024/4'))
console.log('2024/4/28',isValidDateFormat('2024/4/28'))
console.log('202404',isValidDateFormat('202404'))
console.log('20240428',isValidDateFormat('20240428'))
// 只有一个数字
console.log('只有一个数字')
console.log('2024年1月11日',isValidDateFormat('2024年1月11日'))
console.log('2024年11月1日',isValidDateFormat('2024年11月1日'))
console.log('2024-11-1',isValidDateFormat('2024-11-1'))
console.log('2024-1-11',isValidDateFormat('2024-1-11'))
console.log('2024-1',isValidDateFormat('2024-1'))
// // 符号混合错误
console.log('符号混合错误')
console.log('2024-4/28',isValidDateFormat('2024-4/28'))
console.log('2024.4/28',isValidDateFormat('2024-4/28'))
console.log('2024-4.28',isValidDateFormat('2024-4/28'))
// 月日不符合现实错误
console.log('月日不符合现实错误')
console.log('20241328',isValidDateFormat('20241328'))
console.log('20240028',isValidDateFormat('20240028'))
console.log('20240231',isValidDateFormat('20240231'))
console.log('20240132',isValidDateFormat('20240132'))
console.log('2011-2-31',isValidDateFormat('2011-2-31'))
</script>