使用JavaScript開發一個響應式的日期選擇器

一、日期選擇器是什麼？

日期選擇器是一個常見的Web功能，用戶可以使用它選擇一個或多個日期。日期選擇器通常用於預訂、計劃和記錄活動，也用於搜索和篩選包含日期範圍的數據。

在這篇文章中，我們將學習如何使用JavaScript編寫一個響應式的日期選擇器，它具有以下特點：

自適應於設備的大小和方向
支持單選和多選
能夠顯示相鄰的月份和年份
具有可定製的主題和樣式

二、日期選擇器的樣式與布局

在開始編寫JavaScript代碼之前，我們需要先確定日期選擇器的樣式和布局。首先，我們可以使用HTML和CSS創建一個簡單的日期選擇器。以下是一個日期選擇器的HTML和CSS代碼示例：

<div class="datepicker">
  <div class="input">
    <input type="text" class="date" placeholder="Select date(s)" />
    <i class="icon"></i>
  </div>
  <div class="calendar">
    <div class="header">
      <i class="prev"></i>
      <span class="title">August 2021</span>
      <i class="next"></i>
    </div>
    <div class="days">
      <div class="day">S</div>
      <div class="day">M</div>
      <div class="day">T</div>
      <div class="day">W</div>
      <div class="day">T</div>
      <div class="day">F</div>
      <div class="day">S</div>
      <div class="day">1</div>
      <div class="day">2</div>
      <div class="day">3</div>
      <div class="day">4</div>
      <div class="day">5</div>
      <div class="day">6</div>
      <div class="day">7</div>
      <div class="day">8</div>
      <div class="day">9</div>
      <div class="day">10</div>
      <div class="day">11</div>
      <div class="day">12</div>
      <div class="day">13</div>
      <div class="day">14</div>
      <div class="day">15</div>
      <div class="day">16</div>
      <div class="day">17</div>
      <div class="day">18</div>
      <div class="day">19</div>
      <div class="day">20</div>
      <div class="day">21</div>
      <div class="day">22</div>
      <div class="day">23</div>
      <div class="day">24</div>
      <div class="day">25</div>
      <div class="day">26</div>
      <div class="day">27</div>
      <div class="day">28</div>
      <div class="day">29</div>
      <div class="day">30</div>
      <div class="day">31</div>
    </div>
  </div>
</div>

.datepicker {
  display: inline-block;
  position: relative;
  font-family: Arial, sans-serif;
}

.input {
  position: relative;
}

.input .date {
  display: block;
  width: 100%;
  padding: 10px;
  border: 2px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
  outline: none;
}

.input .icon {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  font-size: 20px;
  color: #999;
  cursor: pointer;
}

.calendar {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1;
  display: none;
  width: 260px;
  padding: 10px;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.header {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.header .prev, .header .next {
  display: inline-block;
  width: 0;
  height: 0;
  margin: 0 10px;
  border-style: solid;
  border-width: 5px 5px 0 5px;
  border-color: #999 transparent transparent transparent;
  cursor: pointer;
}

.header .prev {
  transform: rotate(180deg);
}

.header .title {
  flex-grow: 1;
  text-align: center;
  font-size: 18px;
}

.days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-gap: 5px;
  text-align: center;
}

.day {
  display: inline-block;
  padding: 5px;
  width: 100%;
  font-size: 16px;
}

三、選擇器的基本邏輯

在本節中，我們將涵蓋選擇器的基本邏輯，包括顯示/隱藏選擇器、顯示相鄰的月份和年份、響應用戶交互等。

首先，我們需要將選擇器與輸入欄位關聯起來。可以使用以下JavaScript代碼為輸入欄位添加click事件處理程序：

const input = document.querySelector('.input .date');
const picker = document.querySelector('.datepicker');

input.addEventListener('click', () => {
  picker.classList.toggle('open');
});

這將在單擊輸入欄位時打開/關閉選擇器。我們可以使用CSS中的「display: none」和「display: block」樣式來控制選擇器的可見性。

接下來，我們需要添加支持相鄰月份和年份的功能。要實現這一點，我們需要在每個日期選擇器中添加兩個箭頭：「上一個月」和「下一個月」，以便用戶可以單擊它們切換到相鄰的月份。

可以使用以下JavaScript代碼為箭頭添加click事件處理程序：

const prev = document.querySelector('.calendar .prev');
const next = document.querySelector('.calendar .next');

prev.addEventListener('click', () => {
  // Switch to the previous month
});

next.addEventListener('click', () => {
  // Switch to the next month
});

我們可以使用JavaScript來編寫代碼，切換到相鄰月份的過程，包括更新日期和標題。以下是示例代碼：

// Date object representing the currently selected month
let currentDate = new Date();

function renderCalendar() {
  // Render the calendar for the current month
}

function updateCalendar(date) {
  // Update the calendar based on the specified date
}

prev.addEventListener('click', () => {
  currentDate = new Date(currentDate.getFullYear(), currentDate.getMonth() - 1);
  updateCalendar(currentDate);
});

next.addEventListener('click', () => {
  currentDate = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1);
  updateCalendar(currentDate);
});

renderCalendar();

最後，我們需要添加選擇日期的支持，包括單選和多選模式。在單選模式下，用戶只能選擇一個日期，而在多選模式下，用戶可以選擇多個日期。

可以使用以下JavaScript代碼為每個日期添加click事件處理程序：

const days = document.querySelectorAll('.calendar .day');

days.forEach(day => {
  day.addEventListener('click', () => {
    // Handle the click event
  });
});

在單選模式下，我們可以使用以下JavaScript代碼來更新輸入欄位的值：

const input = document.querySelector('.input .date');

days.forEach(day => {
  day.addEventListener('click', () => {
    // Update the input field with the selected date
    input.value = `${currentDate.getMonth() + 1}/${day.innerText}/${currentDate.getFullYear()}`;
    
    // Hide the calendar
    picker.classList.remove('open');
  });
});

在多選模式下，我們需要追蹤用戶選擇的日期。可以使用以下JavaScript代碼來實現：

const selectedDates = [];

days.forEach(day => {
  day.addEventListener('click', () => {
    const date = new Date(currentDate.getFullYear(), currentDate.getMonth(), day.innerText);
    
    // Toggle the selected state of the date
    if (selectedDates.some(d => d.getTime() === date.getTime())) {
      selectedDates.splice(selectedDates.findIndex(d => d.getTime() === date.getTime()), 1);
    } else {
      selectedDates.push(date);
    }
    
    // Update the input field with the selected dates
    input.value = selectedDates.map(d => `${d.getMonth() + 1}/${d.getDate()}/${d.getFullYear()}`).join(', ');
  });
});

四、選擇器的定製和樣式

最後，我們可以通過自定義選擇器的樣式和外觀來定製選擇器。我們可以使用CSS中的類和屬性選擇器來設置樣式。

例如，以下CSS代碼可以將選擇器的背景顏色更改為白色，字體顏色更改為深灰色：

.datepicker {
  background: #fff;
  color: #444;
}

可以使用以下CSS代碼來更改選擇器頭部中的箭頭顏色：

.calendar .prev, .calendar .next {
  border-color: #444 transparent transparent transparent;
}

我們還可以添加動畫和過渡效果來使選擇器更具吸引力。以下CSS代碼將在打開/關閉選擇器時添加動畫效果：

.datepicker.open .calendar {
  display: block;
  animation: slide-down 0.2s ease;
}

.datepicker .calendar {
  transition: all 0.2s ease;
}

@keyframes slide-down {
  0% { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}

五、總結

在本文中，我們學習了如何使用JavaScript編寫一個響應式的日期選擇器。我們涵蓋了日期選擇器的樣式和布局、基本邏輯以及如何定製和樣式化選擇器。

通過學習這些功能，我們可以創建自己的日期選擇器，並根據需要進行定製。

原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/235675.html