javascript实现的简易的DatePicker日历

下面是javascript实现的简易DatePicker日历的完整攻略：

1. 前言

DatePicker（日期选择器）在web应用中是一个非常常见的功能，它可以方便用户选择指定日期，并以统一的格式显示。本文将介绍如何使用javascript实现一款简易的DatePicker。

2. 实现思路

在实现DatePicker时，我们需要做以下几个步骤：

创建一个可供选择日期的日历面板；
在输入框中添加事件，点击输入框时显示日历面板；
当用户在日历面板中选择日期时，将选中的日期显示在输入框中；
添加样式，使日历面板呈现良好的视觉效果。

3. 实现过程

3.1 创建日历面板

我们可以使用html和css来创建一个简单的日历面板。以下是一个简单的示例：

<div id="calendar">
  <div class="calendar-header">
    <a href="#" class="prev-month-btn">&lt;</a> <!-- 上一月 -->
    <span class="calendar-title"></span>
    <a href="#" class="next-month-btn">&gt;</a> <!-- 下一月 -->
  </div>
  <table>
    <thead>
      <tr>
        <th>日</th>
        <th>一</th>
        <th>二</th>
        <th>三</th>
        <th>四</th>
        <th>五</th>
        <th>六</th>
      </tr>
    </thead>
    <tbody></tbody>
  </table>
</div>

#calendar {
    position: absolute;
    z-index: 999;
    background-color: #fff;
    border: 1px solid #ccc;
    padding: 10px;
}

#calendar table {
    width: 100%;
    border-collapse: collapse;
}

#calendar th,
#calendar td {
    text-align: center;
    padding: 5px;
}

#calendar .calendar-header {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
}

#calendar .prev-month-btn,
#calendar .next-month-btn {
    border: none;
    outline: none;
    background-color: transparent;
    font-size: 16px;
    cursor: pointer;   
}

#calendar .calendar-title {
    flex: 1;
    text-align: center;
    font-size: 16px;
}

#calendar td:hover,
#calendar td.selected {
    background-color: #eee;
    cursor: pointer;
}

以上代码中我们创建了一个名为“calendar”的div元素，它包含了一个用于显示日期的表格以及上一个月和下一个月的按钮。表格中包含了日期，星期和空白单元格。

3.2 在输入框中添加事件

绑定事件是让用户可以点击输入框来选择日期的关键。我们可以使用addEventListener方法在输入框上绑定点击事件（click事件），同时在日历面板显示和隐藏时修改日历面板的显示状态。以下是示例代码：

<input type="text" id="datepicker">

const datePicker = document.getElementById('datepicker');
const calendar = document.getElementById('calendar');

datePicker.addEventListener('click', toggleCalendar);

function toggleCalendar() {
    if (calendar.style.display === 'none') {
        showCalendar();
    } else {
        hideCalendar();
    }
}

function showCalendar() {
    calendar.style.display = 'block';
}

function hideCalendar() {
    calendar.style.display = 'none';
}

以上代码中，我们使用了addEventListener方法绑定了一个点击事件，当用户点击输入框时，toggleCalendar方法将被调用。该方法用于切换日历面板的显示状态。

3.3 选择日期并将其显示在输入框中

当用户在日历面板中选择一个日期时，我们需要将选中的日期显示在输入框中。为了实现这一功能，在DatePicker中添加一个新的事件监听器方法，该方法将在日历面板中选择一个日期时被调用。

const datePicker = document.getElementById('datepicker');
const calendar = document.getElementById('calendar');

datePicker.addEventListener('click', toggleCalendar);

// 添加选择日期事件
calendar.querySelector('tbody').addEventListener('click', function (e) {
    if (e.target.tagName.toLowerCase() !== 'td') return;
    const date = e.target.dataset.date;
    datePicker.value = date;
    hideCalendar();
});

在以上代码中，我们首先使用querySelector方法选择日历面板中的tbody元素以便之后的日期选择。接着，我们给tbody元素绑定一个点击事件监听器，并将其放置于IF语句中来确保只有在点击td元素时才执行该功能。当用户点击了一个日期时，我们从所点击的td元素中检索并保存日期，接着将此日期显示在DatePicker输入框中，并通过调用hideCalendar函数隐藏日历面板。

3.4 添加样式

为了让日历面板呈现良好的视觉效果，我们可以添加样式。在本示例中，我们使用了简单的CSS样式，可以通过修改样式表来更改DatePicker的外观。

4. 示例说明

4.1 示例1

以下是一个完整的代码示例，它使用了上述的实现思路，并且可以在浏览器中直接运行。

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>DatePicker示例</title>
        <style>
            /* 样式代码 */
        </style>
    </head>
    <body>
        <input type="text" id="datepicker">

        <div id="calendar">
          <div class="calendar-header">
            <a href="#" class="prev-month-btn">&lt;</a>
            <span class="calendar-title"></span>
            <a href="#" class="next-month-btn">&gt;</a>
          </div>
          <table>
            <thead>
              <tr>
                <th>日</th>
                <th>一</th>
                <th>二</th>
                <th>三</th>
                <th>四</th>
                <th>五</th>
                <th>六</th>
              </tr>
            </thead>
            <tbody></tbody>
          </table>
        </div>

        <script>
            const datePicker = document.getElementById('datepicker');
            const calendar = document.getElementById('calendar');

            datePicker.addEventListener('click', toggleCalendar);

            calendar.querySelector('tbody').addEventListener('click', function (e) {
                if (e.target.tagName.toLowerCase() !== 'td') return;
                const date = e.target.dataset.date;
                datePicker.value = date;
                hideCalendar();
            });

            function toggleCalendar() {
                if (calendar.style.display === 'none') {
                    showCalendar();
                } else {
                    hideCalendar();
                }
            }

            function showCalendar() {
                calendar.style.display = 'block';
            }

            function hideCalendar() {
                calendar.style.display = 'none';
            }
        </script>
    </body>
</html>

4.2 示例2

以下是一个代码示例，它演示了如何使用动态创建的元素来实现DatePicker。请注意，这仅用于演示，并不是最佳实践。

const datePicker = document.createElement('input');
datePicker.type = 'text';
document.body.appendChild(datePicker);

const calendar = document.createElement('div');
calendar.id = 'calendar';
document.body.appendChild(calendar);

const tbody = document.createElement('tbody');
calendar.appendChild(tbody);

createCalendar(new Date().getFullYear(), new Date().getMonth());

datePicker.addEventListener('click', toggleCalendar);

calendar.querySelector('tbody').addEventListener('click', function (e) {
    if (e.target.tagName.toLowerCase() !== 'td') return;
    const date = e.target.dataset.date;
    datePicker.value = date;
    hideCalendar();
});

function toggleCalendar() {
    if (calendar.style.display === 'none') {
        showCalendar();
    } else {
        hideCalendar();
    }
}

function showCalendar() {
    calendar.style.display = 'block';
}

function hideCalendar() {
    calendar.style.display = 'none';
}

function createCalendar(year, month) {
    // 创建标题
    const calendarTitle = document.createElement('span');
    calendarTitle.classList.add('calendar-title');
    calendar.appendChild(calendarTitle);

    // 创建表格
    const table = document.createElement('table');
    calendar.appendChild(table);

    // 创建表头
    const thead = document.createElement('thead');
    const daysOfWeek = ['日', '一', '二', '三', '四', '五', '六'];
    let row = document.createElement('tr');

    for (let dayOfWeek of daysOfWeek) {
        let th = document.createElement('th');
        th.textContent = dayOfWeek;
        row.appendChild(th);
    }

    thead.appendChild(row);
    table.appendChild(thead);

    // 创建表体
    const tbody = document.createElement('tbody');
    table.appendChild(tbody);

    const daysInMonth = new Date(year, month + 1, 0).getDate(); // 获取当前月份的天数

    let day = 1;
    let row = document.createElement('tr');

    for (let i = 1; i <= daysInMonth; i++) { // 将每一天添加为一个单元格
        let td = document.createElement('td');
        td.textContent = i;
        td.dataset.date = `${year}-${month + 1}-${i}`;
        row.appendChild(td);

        if (new Date(year, month, i).getDay() === 6 && i !== daysInMonth) { // 如果是星期六，就新建一个行
            tbody.appendChild(row);
            row = document.createElement('tr');
        } else if (i === daysInMonth) { // 将最后一行单元格填满
            for (let j = 0; j < 7 - new Date(year, month, i).getDay() - 1; j++) {
                let td = document.createElement('td');
                td.textContent = ++day;
                td.dataset.date = `${year}-${month + 2}-${day}`;
                row.appendChild(td);
            }
            tbody.appendChild(row);
        }
    }
    // 设置标题
    calendarTitle.textContent = `${year}-${month + 1}`;
}

在以上示例中，我们使用了createElement方法创建了一个新的input元素和一个新的日历面板。之后，我们用createCalendar方法为日历面板添加了标题、表格头、表格体，并用单元格填充了表格。在创建完整的DOM结构后，我们为input元素添加了单击事件监听器，并用toggleCalendar和hideCalendar方法控制日历面板的显示和隐藏。通过为tbody元素添加了单击事件监听器，我们还从日历面板获取选定的日期并将其显示在输入框中。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：javascript实现的简易的DatePicker日历 - Python技术站