如何开发一个日期选择插件_JavaScript日期选择插件开发实战教程

<input type="text" id="datePicker" placeholder="请选择日期">

function DatePicker(inputElement, options) {
  this.input = inputElement;
  this.options = options || {};
  this.date = new Date();
  this.selectedDate = null;
  this.init();
}

DatePicker.prototype.init = function() {
  this.input.addEventListener('click', () => this.show());
  this.createCalendarEl();
};

DatePicker.prototype.createCalendarEl = function() {
  const calendar = document.createElement('div');
  calendar.className = 'datepicker-container';
<p>// 头部：年月显示与控制
calendar.innerHTML = <code> <div class="datepicker-header"> <span class="prev-month"><</span> <span class="current-month-year"></span> <span class="next-month">></span> </div> <div class="datepicker-body"> <div class="weekdays">日 一 二 三 四 五 六</div> <div class="dates-grid"></div> </div> </code>;</p><p>this.calendarEl = calendar;
document.body.appendChild(calendar);</p><p>// 绑定切换事件
calendar.querySelector('.prev-month').addEventListener('click', () => {
this.date.setMonth(this.date.getMonth() - 1);
this.render();
});</p><p>calendar.querySelector('.next-month').addEventListener('click', () => {
this.date.setMonth(this.date.getMonth() + 1);
this.render();
});
};</p>

DatePicker.prototype.render = function() {
  const year = this.date.getFullYear();
  const month = this.date.getMonth();
  const firstDay = new Date(year, month, 1).getDay(); // 星期几（0-6）
  const daysInMonth = new Date(year, month + 1, 0).getDate();
<p>const grid = this.calendarEl.querySelector('.dates-grid');
grid.innerHTML = '';</p><p>// 填充空白或上月尾部
const prevMonthLastDay = new Date(year, month, 0).getDate();
for (let i = 0; i < firstDay; i++) {
const dayEl = document.createElement('span');
dayEl.textContent = prevMonthLastDay - firstDay + i + 1;
dayEl.classList.add('other-month');
grid.appendChild(dayEl);
}</p><p>// 当前月的每一天
for (let day = 1; day <= daysInMonth; day++) {
const dayEl = document.createElement('span');
dayEl.textContent = day;
dayEl.dataset.date = <code>${year}-${month + 1}-${day}</code>;</p><pre class='brush:php;toolbar:false;'>// 高亮今天
const today = new Date();
if (year === today.getFullYear() && month === today.getMonth() && day === today.getDate()) {
  dayEl.classList.add('today');
}

dayEl.addEventListener('click', (e) => {
  this.selectDate(e.target.dataset.date);
});

grid.appendChild(dayEl);

DatePicker.prototype.show = function() {
  this.render();
  this.calendarEl.style.display = 'block';
  this.positionCalendar();
<p>// 点击外部关闭
this.closeOnClickOutside();
};</p><p>DatePicker.prototype.positionCalendar = function() {
const rect = this.input.getBoundingClientRect();
this.calendarEl.style.position = 'absolute';
this.calendarEl.style.left = rect.left + 'px';
this.calendarEl.style.top = rect.bottom + window.scrollY + 'px';
};</p><p>DatePicker.prototype.selectDate = function(dateStr) {
this.input.value = dateStr;
this.selectedDate = new Date(dateStr);
this.hide();
};</p><p>DatePicker.prototype.hide = function() {
this.calendarEl.style.display = 'none';
};</p><p>DatePicker.prototype.closeOnClickOutside = function() {
const close = (e) => {
if (!this.calendarEl.contains(e.target) && e.target !== this.input) {
this.hide();
document.removeEventListener('click', close);
}
};
setTimeout(() => document.addEventListener('click', close), 0);
};</p>

new DatePicker(document.getElementById('datePicker'));