js实现日期插件
实现基础日期选择功能
使用HTML的<input type="date">原生日期选择器，兼容现代浏览器：
<input type="date" id="datePicker">通过JavaScript获取值：
document.getElementById('datePicker').addEventListener('change', function() {
console.log(this.value); // 输出格式：YYYY-MM-DD
});使用第三方库（Flatpickr）
安装Flatpickr库：
npm install flatpickr或通过CDN引入：
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>初始化日期选择器：
flatpickr("#datePicker", {
dateFormat: "Y-m-d",
minDate: "today",
allowInput: true
});自定义日期选择组件
创建一个简单的交互式日历：
<div id="customCalendar">
<div class="header">
<button id="prevMonth">←</button>
<h3 id="currentMonth"></h3>
<button id="nextMonth">→</button>
</div>
<div class="days" id="daysContainer"></div>
</div>JavaScript逻辑：
let currentDate = new Date();
function renderCalendar() {
const monthNames = ["January", "February", "..."]; // 完整月份数组
document.getElementById("currentMonth").textContent =
`${monthNames[currentDate.getMonth()]} ${currentDate.getFullYear()}`;
// 生成日历格子逻辑（需补充完整实现）
const daysContainer = document.getElementById("daysContainer");
daysContainer.innerHTML = '';
// ... 计算当月天数及排列
}
document.getElementById("prevMonth").addEventListener("click", () => {
currentDate.setMonth(currentDate.getMonth() - 1);
renderCalendar();
});移动端优化
添加触摸事件支持：
const calendar = document.getElementById("customCalendar");
let touchStartX = 0;
calendar.addEventListener("touchstart", (e) => {
touchStartX = e.changedTouches[0].screenX;
});
calendar.addEventListener("touchend", (e) => {
if (e.changedTouches[0].screenX - touchStartX > 50) {
// 右滑视为上一月
currentDate.setMonth(currentDate.getMonth() - 1);
} else if (touchStartX - e.changedTouches[0].screenX > 50) {
// 左滑视为下一月
currentDate.setMonth(currentDate.getMonth() + 1);
}
renderCalendar();
});日期范围限制
在自定义组件中实现禁止选择过去日期：
function isDateSelectable(date) {
const today = new Date();
today.setHours(0, 0, 0, 0);
return date >= today;
}
// 在渲染每个日期格子时调用检查时区处理
使用toLocaleDateString适配本地化显示：
const options = { timeZone: 'Asia/Shanghai', weekday: 'long' };
console.log(new Date().toLocaleDateString('zh-CN', options));
