求适用于Angular 2/4/5的星期选择器（仅选周几）

Hey there! I totally get your frustration— default date pickers are great for full date selection, but when you only need weekday choices (Monday, Tuesday, etc.), all that extra date/year bloat is just unnecessary. Let’s break down your options:

Existing Resources to Check #

• Framework-specific weekday pickers: If you’re working with modern frameworks like React, Vue, or Svelte, dig into popular component libraries. Many have dedicated weekday-only picker components or let you customize existing date pickers to hide date/year displays. For example, some Vue UI kits offer a weekday-select component that strips out all non-weekday-related UI elements.
• Customizable date picker libraries: Tools like Flatpickr or Pikaday let you tweak their display extensively. You can disable the month/year headers, hide the calendar grid, and only show a row of weekday buttons. It takes a bit of configuration, but it’s faster than building from scratch if you already use one of these libraries.
• Vanilla JS lightweight options: There are small, standalone weekday picker scripts out there that focus solely on day selection— search for "vanilla js weekday picker" and you’ll find a few minimal, dependency-free solutions.

If You Need to Build From Scratch #

If none of the above fit your needs, rolling your own is actually really straightforward. Here’s a quick, minimal example to get you started:

<!-- HTML -->
<div class="weekday-picker">
  <button class="day-btn">Monday</button>
  <button class="day-btn">Tuesday</button>
  <button class="day-btn">Wednesday</button>
  <button class="day-btn">Thursday</button>
  <button class="day-btn">Friday</button>
  <button class="day-btn">Saturday</button>
  <button class="day-btn">Sunday</button>
</div>

<!-- CSS -->
<style>
.weekday-picker {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.day-btn {
  padding: 10px 18px;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  background: #ffffff;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s ease;
}

.day-btn:hover {
  border-color: #0066cc;
  background: #f0f8ff;
}

.day-btn.active {
  background: #0066cc;
  color: #ffffff;
  border-color: #0066cc;
}
</style>

<!-- JS -->
<script>
const weekdayButtons = document.querySelectorAll('.day-btn');
const selectedDays = [];

weekdayButtons.forEach(button => {
  button.addEventListener('click', () => {
    const dayName = button.textContent;
    const isSelected = button.classList.contains('active');

    if (isSelected) {
      // Remove from selection
      button.classList.remove('active');
      selectedDays.splice(selectedDays.indexOf(dayName), 1);
    } else {
      // Add to selection
      button.classList.add('active');
      selectedDays.push(dayName);
    }

    // Use selectedDays array however you need (e.g., pass to form)
    console.log('Selected weekdays:', selectedDays);
  });
});
</script>

This gives you a flexible picker that supports multiple selections, with clean styling. You can easily adjust it to single selection mode by clearing the active class from all buttons when one is clicked.

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