如何在Angular 5或6中创建仅时间选择器？

我来给你梳理下实现这个功能的核心思路和具体步骤，日常开发中这类预约场景的需求太常见了，主要分为前端交互和后端数据支撑两大块：

一、前端核心交互流程 #

• 第一步：集成日历组件（不管是手写基础日历，还是用Element UI、React Datepicker这类现成UI库），给日期选择事件绑定回调函数。
• 第二步：用户选中日期后，在回调里把日期格式转成和后端约定好的格式（比如YYYY-MM-DD），发起请求到后端接口。
• 第三步：拿到后端返回的可用时段数据后，把这些数据渲染到页面上——可以用列表展示，也可以绑定到时间选择器的可选选项里。
• 第四步：处理边界情况：如果选中的日期没有可用时段，要显示友好提示；如果请求失败，也要给用户反馈（比如“加载失败，请稍后重试”）。

二、后端数据处理逻辑 #

• 第一步：接收前端传来的日期参数，先做格式校验，避免无效请求拖垮服务。
• 第二步：查询数据库中该日期的已预约记录，结合业务预设的可预约时段（比如每天9:00-18:00，每30分钟一个时段），计算出剩余的可用时段。
• 第三步：把可用时段整理成前端容易渲染的格式（比如字符串数组：["09:00", "09:30", "10:00"]），返回给前端。
• 第四步：可选优化：给热门日期的可用时段做缓存（比如缓存5分钟），减少数据库查询压力。

三、示例代码片段 #

前端（Vue + Element UI为例） #

<template>
  <div class="booking-container">
    <el-date-picker
      v-model="selectedDate"
      type="date"
      placeholder="选择预约日期"
      @change="getAvailableSlots"
      style="width: 200px;"
    />
    <div class="slots-wrapper" v-if="availableSlots.length">
      <span 
        class="slot-item" 
        v-for="slot in availableSlots" 
        :key="slot"
      >
        {{ slot }}
      </span>
    </div>
    <p class="no-slot-tip" v-else>该日期暂无可用预约时段，请选择其他日期</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedDate: null,
      availableSlots: []
    }
  },
  methods: {
    async getAvailableSlots() {
      if (!this.selectedDate) return
      try {
        // 转成后端需要的日期格式
        const targetDate = this.selectedDate.format('YYYY-MM-DD')
        const res = await this.$axios.get('/api/booking/available-slots', {
          params: { date: targetDate }
        })
        this.availableSlots = res.data.slots
      } catch (error) {
        console.error('获取可用时段失败:', error)
        this.$message.error('加载可用时段失败，请稍后重试')
      }
    }
  }
}
</script>

<style scoped>
.slots-wrapper {
  margin-top: 15px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.slot-item {
  padding: 6px 12px;
  background: #f0f9ff;
  border-radius: 4px;
  cursor: pointer;
}
.no-slot-tip {
  margin-top: 15px;
  color: #909399;
}
</style>

后端（Node.js + Express + MySQL为例） #

const express = require('express')
const router = express.Router()
const mysql = require('mysql2/promise')

// 数据库连接配置（实际项目建议放配置文件）
const dbConfig = {
  host: 'localhost',
  user: 'root',
  password: 'your_password',
  database: 'booking_system'
}

router.get('/booking/available-slots', async (req, res) => {
  try {
    const { date } = req.query
    // 校验日期格式
    const dateRegex = /^\d{4}-\d{2}-\d{2}$/
    if (!dateRegex.test(date)) {
      return res.status(400).json({ message: '日期格式错误，请使用YYYY-MM-DD格式' })
    }

    // 建立数据库连接
    const connection = await mysql.createConnection(dbConfig)
    // 查询该日期已被预约的时段
    const [bookedSlots] = await connection.execute(
      'SELECT slot_time FROM appointments WHERE appointment_date = ?',
      [date]
    )
    await connection.end()

    // 业务预设的可预约时段（可根据需求调整）
    const allPossibleSlots = [
      '09:00', '09:30', '10:00', '10:30', '11:00', '11:30',
      '13:00', '13:30', '14:00', '14:30', '15:00', '15:30',
      '16:00', '16:30', '17:00', '17:30'
    ]

    // 计算可用时段：过滤掉已预约的
    const bookedSet = new Set(bookedSlots.map(item => item.slot_time))
    const availableSlots = allPossibleSlots.filter(slot => !bookedSet.has(slot))

    res.json({ slots: availableSlots })
  } catch (error) {
    console.error('查询可用时段失败:', error)
    res.status(500).json({ message: '服务器内部错误，请稍后重试' })
  }
})

module.exports = router

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