如何用JavaScript实现一个简易的日期选择器（DatePicker）日历？_产品资讯

发布时间:2024-10-14 20:44

阅读量:0

这是一个关于如何使用JavaScript实现简易的DatePicker日历的示例代码：，，``

javascript，，，，，，简易DatePicker，， .datepicker {， display: inline-block;， font-size: 14px;， }， .datepicker table {， border-collapse: collapse;， width: 175px;， }， .datepicker th, .datepicker td {， padding: 5px;， text-align: center;， }， .datepicker th {， background-color: #f2f2f2;， }， .datepicker td {， cursor: pointer;， }， .datepicker td:hover {， background-color: #f2f2f2;， }，，，，，，，， function createCalendar(year, month) {， const days = ['日', '一', '二', '三', '四', '五', '六'];， const date = new Date(year, month);， const day = date.getDay();， const firstDay = (new Date(year, month 1, 1)).getDay();， const lastDate = new Date(year, month + 1, 0).getDate();， const preMonthLastDate = new Date(year, month 1, 0).getDate();， let calendar = '' + year + '年' + (month + 1) + '月';， calendar += '' + days.join('') + '';， for (let i = 0; i< 6;="" i++)="" {，="" calendar="" +='' ;，="" for="" (let="" j="0;">< 7;="" j++)="" {，="" if="" (i="==" 0="" &&="">< firstday)="" {，="" calendar="" +='' ;，="" }="" else="" if="" (i="==" 0="" &&="" j="">= firstDay) {， calendar += '' + (j firstDay + 1) + '';， } else if (((i 1) * 7 + j + 1) > lastDate) {， calendar += '';， } else {， calendar += '' + ((i 1) * 7 + j + 1) + '';， }， }， calendar += '';， }， return calendar;， }，， function renderCalendar() {， const now = new Date();， const year = now.getFullYear();， const month = now.getMonth();， document.getElementById('calendar').innerHTML = createCalendar(year, month);， }，， renderCalendar();，，，，

``，，这段代码实现了一个简单的DatePicker日历，可以根据当前日期显示日历。你可以将这段代码复制到一个HTML文件中，然后用浏览器打开查看效果。

简易的DatePicker日历实现

1. HTML结构

我们需要创建一个HTML结构来容纳我们的日期选择器，我们将使用一个输入框（input）和一个弹出层（div）来显示可选的日期。

 <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>简易DatePicker</title>     <link rel="stylesheet" href="styles.css"> </head> <body>     <input type="text" id="datepicker" readonly>     <div id="datepicker-popup"></div>     <script src="script.js"></script> </body> </html>

2. CSS样式

我们需要为日期选择器添加一些基本的样式，这里我们只提供一个简单的样式示例，你可以根据需要进行修改。

 /* styles.css */ #datepicker {     padding: 5px;     border: 1px solid #ccc; } #datepicker-popup {     display: none;     position: absolute;     background-color: #fff;     border: 1px solid #ccc;     z-index: 1; } #datepicker-popup table {     border-collapse: collapse;     width: 100%; } #datepicker-popup th, #datepicker-popup td {     padding: 5px;     text-align: center;     border: 1px solid #ccc; } #datepicker-popup th {     background-color: #f2f2f2; } #datepicker-popup td:hover {     background-color: #e6e6e6;     cursor: pointer; }

3. JavaScript逻辑

我们需要编写JavaScript代码来实现日期选择器的功能，以下是一个简单的实现：

 // script.js document.addEventListener('DOMContentLoaded', function () {     const datepicker = document.getElementById('datepicker');     const datepickerPopup = document.getElementById('datepicker-popup');     let selectedDate = null;     datepicker.addEventListener('click', function () {         if (datepickerPopup.style.display === 'none') {             showDatepicker();         } else {             hideDatepicker();         }     });     function showDatepicker() {         const today = new Date();         const currentMonth = today.getMonth();         const currentYear = today.getFullYear();         const daysInMonth = new Date(currentYear, currentMonth + 1, 0).getDate();         const firstDayOfMonth = new Date(currentYear, currentMonth, 1).getDay();         datepickerPopup.innerHTML = '';         datepickerPopup.style.display = 'block';         const table = document.createElement('table');         const thead = document.createElement('thead');         const tr = document.createElement('tr');         ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'].forEach(day => {             const th = document.createElement('th');             th.textContent = day;             tr.appendChild(th);         });         thead.appendChild(tr);         table.appendChild(thead);         const tbody = document.createElement('tbody');         let date = 1;         for (let i = 0; i < 6; i++) {             const tr = document.createElement('tr');             for (let j = 0; j < 7; j++) {                 if (i === 0 && j < firstDayOfMonth || date > daysInMonth) {                     const td = document.createElement('td');                     tr.appendChild(td);                 } else {                     const td = document.createElement('td');                     td.textContent = date;                     td.addEventListener('click', function () {                         selectedDate = new Date(currentYear, currentMonth, date);                         datepicker.value = selectedDate.toISOString().slice(0, 10);                         hideDatepicker();                     });                     tr.appendChild(td);                     date++;                 }             }             tbody.appendChild(tr);         }         table.appendChild(tbody);         datepickerPopup.appendChild(table);     }     function hideDatepicker() {         datepickerPopup.style.display = 'none';     } });