如何在ASP内容页中创建可选择年月日的date picker组件

无需引入第三方依赖，直接嵌入现有代码即可使用，所有面向用户的文本均为中文，符合点击输入框在对应位置弹出日历、支持年月日切换选择的交互要求。

核心实现特性 #

• 点击输入框时自动计算输入框页面坐标，在输入框正下方弹出日历面板
• 面板顶部支持上一年/上一月/下一月/下一年快速切换，主体区域按周排布日期
• 自动区分展示上月末尾日期、当月日期、下月开头日期，额外标注今日态、选中态
• 点击日期后自动将YYYY-MM-DD格式的日期值填入输入框，点击面板外任意区域自动收起面板
• 支持多输入框批量绑定，页面滚动时面板位置不会错位

代码实现 #

1. HTML部分（放到你需要日期选择器的页面位置）

<!-- 给需要绑定日期选择的输入框加date-input类即可 -->
<input type="text" class="date-input" placeholder="请选择日期" readonly>

2. CSS部分（加到全局样式文件中）

.date-picker-panel {
  position: absolute;
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  padding: 10px;
  width: 280px;
  z-index: 9999;
  display: none;
}
.date-picker-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.date-picker-header button {
  border: none;
  background: #f5f5f5;
  border-radius: 3px;
  padding: 2px 8px;
  cursor: pointer;
}
.date-picker-week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-size: 12px;
  color: #666;
  margin-bottom: 8px;
}
.date-picker-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  text-align: center;
}
.date-picker-days span {
  padding: 5px 0;
  border-radius: 3px;
  cursor: pointer;
  font-size: 13px;
}
.date-picker-days span.other-month {
  color: #ccc;
}
.date-picker-days span.today {
  border: 1px solid #1677ff;
}
.date-picker-days span.selected {
  background: #1677ff;
  color: #fff;
}
.date-picker-days span:hover {
  background: #e6f4ff;
}

3. JS部分（放到页面逻辑代码中执行即可）

const weekText = ['日', '一', '二', '三', '四', '五', '六']
const monthText = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']

function initDatePicker(inputEl) {
  const panel = document.createElement('div')
  panel.className = 'date-picker-panel'
  document.body.appendChild(panel)
  
  let currentYear = new Date().getFullYear()
  let currentMonth = new Date().getMonth()
  let selectedDate = null

  function renderPanel() {
    panel.innerHTML = `
      <div class="date-picker-header">
        <button class="prev-year">«</button>
        <button class="prev-month">‹</button>
        <span class="current-date">${currentYear}年 ${monthText[currentMonth]}</span>
        <button class="next-month">›</button>
        <button class="next-year">»</button>
      </div>
      <div class="date-picker-week">
        ${weekText.map(w => `<span>${w}</span>`).join('')}
      </div>
      <div class="date-picker-days"></div>
    `
    const daysContainer = panel.querySelector('.date-picker-days')
    const firstDayOfMonth = new Date(currentYear, currentMonth, 1).getDay()
    const daysInMonth = new Date(currentYear, currentMonth + 1, 0).getDate()
    const daysInPrevMonth = new Date(currentYear, currentMonth, 0).getDate()

    for(let i = firstDayOfMonth - 1; i >= 0; i--) {
      const day = daysInPrevMonth - i
      const span = document.createElement('span')
      span.className = 'other-month'
      span.textContent = day
      daysContainer.appendChild(span)
    }

    const today = new Date()
    for(let i = 1; i <= daysInMonth; i++) {
      const span = document.createElement('span')
      span.textContent = i
      if(i === today.getDate() && currentMonth === today.getMonth() && currentYear === today.getFullYear()) {
        span.classList.add('today')
      }
      if(selectedDate && i === selectedDate.getDate() && currentMonth === selectedDate.getMonth() && currentYear === selectedDate.getFullYear()) {
        span.classList.add('selected')
      }
      span.addEventListener('click', () => {
        selectedDate = new Date(currentYear, currentMonth, i)
        const formatVal = `${selectedDate.getFullYear()}-${String(selectedDate.getMonth()+1).padStart(2, '0')}-${String(selectedDate.getDate()).padStart(2, '0')}`
        inputEl.value = formatVal
        panel.style.display = 'none'
      })
      daysContainer.appendChild(span)
    }

    const totalCells = daysContainer.children.length
    const nextDays = 42 - totalCells
    for(let i = 1; i <= nextDays; i++) {
      const span = document.createElement('span')
      span.className = 'other-month'
      span.textContent = i
      daysContainer.appendChild(span)
    }

    panel.querySelector('.prev-year').addEventListener('click', () => {
      currentYear--
      renderPanel()
    })
    panel.querySelector('.next-year').addEventListener('click', () => {
      currentYear++
      renderPanel()
    })
    panel.querySelector('.prev-month').addEventListener('click', () => {
      currentMonth--
      if(currentMonth < 0) {
        currentMonth = 11
        currentYear--
      }
      renderPanel()
    })
    panel.querySelector('.next-month').addEventListener('click', () => {
      currentMonth++
      if(currentMonth > 11) {
        currentMonth = 0
        currentYear++
      }
      renderPanel()
    })
  }

  inputEl.addEventListener('click', (e) => {
    e.stopPropagation()
    const rect = inputEl.getBoundingClientRect()
    panel.style.top = `${rect.bottom + window.scrollY + 4}px`
    panel.style.left = `${rect.left + window.scrollX}px`
    if(inputEl.value) {
      const [y, m, d] = inputEl.value.split('-').map(Number)
      selectedDate = new Date(y, m-1, d)
      currentYear = y
      currentMonth = m-1
    }
    renderPanel()
    panel.style.display = 'block'
  })

  document.addEventListener('click', () => {
    panel.style.display = 'none'
  })
  panel.addEventListener('click', (e) => {
    e.stopPropagation()
  })
}

// 自动初始化所有带date-input类的输入框
document.querySelectorAll('.date-input').forEach(input => {
  initDatePicker(input)
})

如果需要自定义日期输出格式，修改选中日期时给inputEl.value赋值的拼接规则即可；如果需要限制可选日期范围，在日期点击事件里加判断逻辑就行。

内容的提问来源于stack exchange，提问作者Mahi Patil