使用Vue.js实现当日已过时段禁用选择、非当日全时段可选的功能

Let's implement the time slot disable feature you need, with clear logic for today vs future dates. Here's how to modify your code step by step:

Step 1: Add Date Tracking Variables #

First, we need to track the selected date and determine if it's today. Update your component's data section:

data() {
  return {
    selectedDate: new Date(), // Default to today
    time: {}, // Initialize with empty, or set to a default time if needed
    times: [
      { value: "09:00", text: "09:00 - 09:30" },
      { value: "09:30", text: "09:30 - 10:00" },
      { value: "10:00", text: "10:00 - 10:30" },
      { value: "10:30", text: "10:30 - 11:00" },
      { value: "11:00", text: "11:00 - 11:30" },
      { value: "11:30", text: "11:30 - 12:00" },
      { value: "12:00", text: "12:00 - 12:30" },
      { value: "12:30", text: "12:30 - 13:00" },
      { value: "13:00", text: "13:00 - 13:30" },
      { value: "13:30", text: "13:30 - 14:00" },
      { value: "14:00", text: "14:00 - 14:30" },
      { value: "14:30", text: "14:30 - 15:00" },
      { value: "15:00", text: "15:00 - 15:30" },
      { value: "15:30", text: "15:30 - 16:00" },
      { value: "16:00", text: "16:00 - 16:30" },
      { value: "16:30", text: "16:30 - 17:00" }
    ]
  };
}

Step 2: Add Computed Properties #

Create computed properties to check if the selected date is today and get the current time in a comparable format:

computed: {
  isToday() {
    const today = new Date();
    // Compare year, month, and day to confirm it's today
    return (
      this.selectedDate.getFullYear() === today.getFullYear() &&
      this.selectedDate.getMonth() === today.getMonth() &&
      this.selectedDate.getDate() === today.getDate()
    );
  },
  currentTime() {
    // Format current time as "HH:MM" for easy comparison
    const now = new Date();
    const hours = String(now.getHours()).padStart(2, "0");
    const minutes = String(now.getMinutes()).padStart(2, "0");
    return `${hours}:${minutes}`;
  }
}

Step 3: Add Time Comparison Method #

Create a method to compare two time strings (avoids issues with direct string comparison like "10:00" vs "9:00"):

methods: {
  compareTime(slotTime, currentTime) {
    // Convert time strings to total minutes since midnight
    const [slotHour, slotMinute] = slotTime.split(":").map(Number);
    const [currentHour, currentMinute] = currentTime.split(":").map(Number);
    
    const slotTotalMinutes = slotHour * 60 + slotMinute;
    const currentTotalMinutes = currentHour * 60 + currentMinute;
    
    // Return true if the slot time is earlier than current time (disable the button)
    return slotTotalMinutes < currentTotalMinutes;
  }
}

Step 4: Update the Template #

Modify your template to include a date picker (so users can switch dates) and add the disabled attribute to the time slot buttons:

.col-12.col-sm-12.col-md-6.col-lg-6.col-xl-6
  h3.mb-2.mt-2 Saat Seç
  <!-- Add date picker to let users select a date -->
  el-date-picker(
    v-model="selectedDate",
    type="date",
    placeholder="Select Date",
    class="mb-3"
  )
  .meet-btn-area
    el-button.mb-2.mr-2(
      v-for="item in times",
      :key="item.value",
      size="medium",
      :type="item.value === time.value ? 'info' : ''",
      :active="item.value === time.value",
      :disabled="isToday && compareTime(item.value, currentTime)",
      @click="time = item"
    )
      {{ item.text }}

How It Works #

• Today's Slots: When the selected date is today, the disabled attribute checks if the slot's start time is earlier than the current time (16:18 in your case). All slots before 16:18 will be disabled.
• Future Dates: If the selected date is tomorrow or later, isToday becomes false, so no slots are disabled—all are selectable.

内容的提问来源于stack exchange，提问作者Mehmet Küçükçelebi