时间选择js效果代码

时间选择器（Date Picker）是一种常见的用户界面组件，用于允许用户从日历中选择一个或多个日期。在前端开发中，JavaScript 是实现这一功能的常用工具。以下是一个简单的时间选择器的 JavaScript 效果代码示例，使用了原生的 HTML 和 JavaScript，以及一些 CSS 来增强视觉效果。

基础概念

时间选择器通常基于日历视图，允许用户通过点击或滚动来选择日期。它可以配置为单选、多选或范围选择模式，并且可以自定义日期格式、最小/最大可选日期等。

优势

用户体验：直观的日历视图使用户能够轻松选择日期。
灵活性：可以定制日期格式、禁用特定日期等。
可访问性：良好的键盘导航支持，方便残障用户使用。

类型

简单日期选择器：只允许选择一个日期。
范围日期选择器：允许选择一个日期范围。
多选日期选择器：允许选择多个不连续的日期。

应用场景

表单填写：用户需要在表单中输入日期信息。
预订系统：如酒店、机票预订等需要选择入住/离开日期的场景。
日程管理：日历应用或任务管理工具中的日期选择。

示例代码

以下是一个简单的单选日期选择器的 JavaScript 实现：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Date Picker Example</title>
<style>
  .datepicker {
    display: none;
    position: absolute;
    border: 1px solid #ccc;
    background: white;
  }
  .datepicker table {
    width: 100%;
    border-collapse: collapse;
  }
  .datepicker th, .datepicker td {
    text-align: center;
    padding: 5px;
  }
  .datepicker td:hover {
    background-color: #f0f0f0;
    cursor: pointer;
  }
</style>
</head>
<body>

<input type="text" id="dateInput" placeholder="Select a date">
<div class="datepicker" id="datePicker">
  <table>
    <thead>
      <tr>
        <th>Sun</th><th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th>
      </tr>
    </thead>
    <tbody></tbody>
  </table>
</div>

<script>
  const dateInput = document.getElementById('dateInput');
  const datePicker = document.getElementById('datePicker');
  let currentDate = new Date();

  function generateCalendar(date) {
    const year = date.getFullYear();
    const month = date.getMonth();
    const firstDay = new Date(year, month, 1).getDay();
    const daysInMonth = new Date(year, month + 1, 0).getDate();

    let calendarHTML = '<tr>';
    for (let i = 0; i < firstDay; i++) {
      calendarHTML += '<td></td>';
    }
    for (let day = 1; day <= daysInMonth; day++) {
      if ((firstDay + day - 1) % 7 === 0 && day !== 1) {
        calendarHTML += '</tr><tr>';
      }
      calendarHTML += `<td>${day}</td>`;
    }
    return calendarHTML;
  }

  function showDatePicker(event) {
    event.stopPropagation();
    datePicker.style.display = 'block';
    datePicker.innerHTML = generateCalendar(currentDate);
  }

  function hideDatePicker() {
    datePicker.style.display = 'none';
  }

  function selectDate(event) {
    if (event.target.tagName === 'TD') {
      const selectedDay = event.target.textContent;
      dateInput.value = `${currentDate.getFullYear()}-${currentDate.getMonth() + 1}-${selectedDay}`;
      hideDatePicker();
    }
  }

  dateInput.addEventListener('focus', showDatePicker);
  document.addEventListener('click', hideDatePicker);
  datePicker.addEventListener('click', selectDate);
</script>

</body>
</html>