如何使用JavaScript和jQuery自定义格式化日期并禁用过去日期

日期格式化实现 #

你提到的目标格式Nov 17, 20021存在年份笔误，以下方案默认按合法四位公历年份处理，使用JS原生Intl.DateTimeFormatAPI即可实现需求，无需引入第三方依赖：

// 日期格式化函数
const formatToTarget = (date) => {
  return new Intl.DateTimeFormat('en-US', {
    year: 'numeric',
    month: 'short',
    day: 'numeric'
  }).format(date)
}

// 测试效果：输入2021年11月17日，输出 Nov 17, 2021
console.log(formatToTarget(new Date(2021, 10, 17)))

禁用过去日期功能实现 #

原生date类型输入框支持通过min属性限制可选的最小日期，将min设为当日的YYYY-MM-DD格式值即可自动禁止选择过去的日期，改造后的完整代码如下：

const input = document.createElement('input');

input.type = "date"
input.id = "scheduleTime"
input.className = "input-text";

const today = new Date()
// en-CA地区的日期格式默认为YYYY-MM-DD，和date输入框的value要求格式匹配
const todayStr = today.toLocaleDateString('en-CA')
input.value = todayStr
// 设置最小可选日期为今日，实现禁用过去日期
input.min = todayStr

// 监听日期选择事件，可直接拿到格式化后的目标格式值
input.addEventListener('change', (e) => {
  const selectedDate = new Date(e.target.value)
  const targetDateStr = formatToTarget(selectedDate)
  // 此处targetDateStr就是你需要的 Nov 17, 2021 格式结果
  console.log(targetDateStr)
})

补充说明 #

• 原生date输入框在页面上的显示格式由浏览器和系统地区决定，实际取值固定为YYYY-MM-DD格式，不影响后续格式化处理
• Intl.DateTimeFormat兼容性覆盖所有主流现代浏览器，生产环境可直接使用

内容的提问来源于stack exchange，提问作者Heng Seyha