根据角度日期列表突出显示日期选择器中的日期

基础概念

日期选择器（Date Picker）是一种用户界面组件，允许用户选择日期。它通常用于表单输入，以便用户能够方便地选择特定的日期。根据角度日期列表突出显示日期是指在日期选择器中，根据特定的日期列表来高亮显示某些日期，以便用户更容易识别这些重要的日期。

类型

静态高亮：在日期选择器初始化时，根据预设的日期列表高亮显示日期。
动态高亮：根据实时数据或用户操作动态更新高亮显示的日期列表。

应用场景

日历事件：在日历应用中，高亮显示重要的会议、活动或节假日。
预订系统：在酒店、航班或活动预订系统中，高亮显示已预订或不可用的日期。
提醒功能：在任务管理或提醒应用中，高亮显示即将到来的重要日期。

实现方法

以下是一个使用JavaScript和HTML实现日期选择器并根据角度日期列表突出显示日期的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Date Picker with Highlighted Dates</title>
    <style>
        .highlighted {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <input type="date" id="datePicker">
    <script>
        const datePicker = document.getElementById('datePicker');
        const highlightedDates = ['2023-10-15', '2023-10-20', '2023-10-25'];

        datePicker.addEventListener('change', (event) => {
            const selectedDate = event.target.value;
            highlightDates();
        });

        function highlightDates() {
            const calendar = datePicker.querySelector('.calendar');
            if (calendar) {
                calendar.innerHTML = ''; // Clear previous highlights
                highlightedDates.forEach(date => {
                    const dayElement = calendar.querySelector(`[data-date="${date}"]`);
                    if (dayElement) {
                        dayElement.classList.add('highlighted');
                    }
                });
            }
        }

        // Initialize highlights on page load
        highlightDates();
    </script>
</body>
</html>