实现一个简单的日期选择器 (Date Picker)-JavaScript中文网-JavaScript教程资源分享门户

实现一个简单的日期选择器 (Date Picker)

推荐答案

-- -------------------- ---- -------
--------- -----
----- ----------
------
    ----- ----------------
    ----- --------------- ---------------------------- -------------------
    ------------- ---- --------------
    -------
        ------------ -
            --------- ---------
            -------- -------------
        -
        ------------ ----- -
            -------- ----
            ---------- -----
            ------- --- ----- -----
            -------------- ----
        -
        --------- -
            -------- -----
            --------- ---------
            ---- -----
            ----- --
            ----------------- -----
            ------- --- ----- -----
            -------------- ----
            -------- -----
            -------- -----
        -
        -------------- -
            -------- ------
        -
        --------- ----- -
            ------ -----
            ---------------- ---------
        -
        --------- --- --------- -- -
            -------- ----
            ----------- -------
            ------- --- ----- -----
        -
        --------- -------- -
            ----------------- --------
            ------- --------
        -
    --------
-------
------
    ---- --------------------
        ------ ----------- --------------- ---------
        ---- ---------------- --------------
            -------
                -------
                    ----
                        --- ------------
                            ------- --------------------------
                            ----- -------------------------------
                            ------- --------------------------
                        -----
                    -----
                    ----
                        ------------
                        ------------
                        ------------
                        ------------
                        ------------
                        ------------
                        ------------
                    -----
                --------
                ------ -------------------
                --------
            --------
        ------
    ------

    --------
        ----- --------- - --------------------------------------
        ----- -------- - ------------------------------------
        ----- ------------ - -----------------------------------------
        ----- ---------------- - ----------------------------------------------
        ----- --------------- - --------------------------------------
        ----- --------------- - --------------------------------------

        --- ----------- - --- -------
        --- ------------ - -----

        -------- -------------------- -
            ----- ---- - -------------------
            ----- ----- - ----------------
            ----- -------- - --- ---------- ------ ---
            ----- ------- - --- ---------- ----- - -- ---
            ----- ----------- - ------------------
            ----- ----------- - ------------------

            ---------------------------- - --------------------------------- - ------ ------ --- ---------

            --- ------------ - ---
            --- --- - --

            --- ---- - - -- - - -- ---- -
                ------------ -- -------
                --- ---- - - -- - - -- ---- -
                    -- -- --- - -- - - ------------ -
                        ------------ -- ------------
                    - ---- -- ---- - ------------ -
                        ------------ -- ------------
                    - ---- -
                        ----- ---------- - ----------------------- - -------------- ------------------------------- -------
                        ------------ -- ---- ---------------------------------------
                        ------
                    -
                -
                ------------ -- --------
            -

            ---------------------- - -------------
        -

        -------- ------------------------ -
            ------------ - -----
            --------------- - --------------------------
            ----------------------------------
        -

        ----------------------------------- -- -- -
            ----------------------------------
        ---

        -------------------------------------- ------- -- -
            -- --------------------- --- ---- -- -------------------------- -
                ----- ------------------ - --------------------------
                ----- ------ ------ ---- - ------------------------------
                ---------------------- ---------- ----- - -- ------
            -
        ---

        ----------------------------------------- -- -- -
            ------------------------------------------- - ---
            ----------------------------
        ---

        ----------------------------------------- -- -- -
            ------------------------------------------- - ---
            ----------------------------
        ---

        ----------------------------
    ---------
-------
-------

本题详细解读

1. HTML 结构

<div class="date-picker">: 这是日期选择器的容器，包含一个输入框和一个日历面板。
<input type="text" id="date-input" readonly>: 用于显示选中的日期，用户无法直接编辑。
<div class="calendar" id="calendar">: 日历面板，默认隐藏，点击输入框时显示。
<table>: 用于显示日历的表格结构，包含表头和日期单元格。

2. CSS 样式

.date-picker: 设置日期选择器的相对定位，使其内部的日历面板可以绝对定位。
.calendar: 设置日历面板的样式，包括背景色、边框、圆角等。
.calendar.show: 控制日历面板的显示与隐藏。
td:hover: 当用户悬停在日期单元格上时，改变背景色以提供视觉反馈。

3. JavaScript 逻辑

renderCalendar(date): 根据传入的日期渲染日历面板。计算当前月份的天数、起始日，并生成对应的 HTML 结构。
updateSelectedDate(date): 更新选中的日期，并将其显示在输入框中，同时隐藏日历面板。
事件监听:
- dateInput.addEventListener('click'): 点击输入框时显示或隐藏日历面板。
- calendarBody.addEventListener('click'): 点击日历面板中的日期单元格时，更新选中的日期。
- prevMonthButton.addEventListener('click'): 点击“上一月”按钮时，切换到上一个月并重新渲染日历。
- nextMonthButton.addEventListener('click'): 点击“下一月”按钮时，切换到下一个月并重新渲染日历。

4. 功能实现

日期选择: 用户可以通过点击日历面板中的日期单元格来选择日期，选中的日期会显示在输入框中。
月份切换: 用户可以通过点击“上一月”或“下一月”按钮来切换月份，日历面板会动态更新。

5. 扩展性

该日期选择器是一个基础实现，可以根据需求进一步扩展，例如添加时间选择、支持多语言、自定义样式等。

纠错
反馈