原生js封装日期

最新推荐文章于 2024-07-22 08:55:10 发布

山崩及坏

最新推荐文章于 2024-07-22 08:55:10 发布

阅读量118

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/m0_60289222/article/details/132221207

版权

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .hidden {
            display: none;
        }
    </style>
</head>

<body>
    <input type="text" id="date-input" placeholder="选择日期">

    <!-- 日期选择器 -->
    <div id="date-picker" class="date-picker hidden">
        <div class="picker-header">
            <button id="cancel-btn">取消</button>
            <button id="confirm-btn">确定</button>
        </div>
        <div class="picker-body">
            <div class="year-picker"></div>
            <div class="month-picker"></div>
            <div class="day-picker"></div>
        </div>
    </div>
</body>

</html>
<script src="./index.js"></script>

简单的页面编写插入JS即可使用

// 获取相关DOM元素
const datePicker = document.getElementById('date-picker');
const dateInput = document.getElementById('date-input');
const cancelBtn = document.getElementById('cancel-btn');
const confirmBtn = document.getElementById('confirm-btn');
const yearPicker = document.querySelector('.year-picker');
const monthPicker = document.querySelector('.month-picker');
const dayPicker = document.querySelector('.day-picker');

// 获取可选的年份和月份
const years = [];
for (let i = 1990; i <= 2099; i++) {
  years.push(i);
}
const months = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'];

// 日期选择器对象
const datePickerObj = {
  year: new Date().getFullYear(),
  month: new Date().getMonth() + 1,
  day: new Date().getDate(),
  
  // 初始化日期选择器
  initDatePicker: function() {
    this.renderYearPicker();
    this.renderMonthPicker();
    this.updateDayPicker();
    this.showDatePicker();
  },
  
  // 渲染年份选择器
  renderYearPicker: function() {
    let options = '';
    for (let year of years) {
      options += `<option value="${year}">${year}</option>`;
    }
    yearPicker.innerHTML = `<select>${options}</select>`;
    yearPicker.querySelector('select').addEventListener('change', this.updateDayPicker.bind(this));
    yearPicker.querySelector('select').value = this.year;
  },
  
  // 渲染月份选择器
  renderMonthPicker: function() {
    let options = '';
    for (let month of months) {
      options += `<option value="${month}">${month}</option>`;
    }
    monthPicker.innerHTML = `<select>${options}</select>`;
    monthPicker.querySelector('select').addEventListener('change', this.updateDayPicker.bind(this));
    monthPicker.querySelector('select').value = this.month;
  },
  
  // 更新日期选择器
  updateDayPicker: function() {
    const year = parseInt(yearPicker.querySelector('select').value);
    const month = parseInt(monthPicker.querySelector('select').value);
    
    // 获取当前月份的总天数
    const lastDay = new Date(year, month, 0).getDate();
    
    let options = '';
    for (let i = 1; i <= lastDay; i++) {
      options += `<option value="${i}">${i}</option>`;
    }
    dayPicker.innerHTML = `<select>${options}</select>`;
    dayPicker.querySelector('select').value = this.day;
  },
  
  // 显示日期选择器
  showDatePicker: function() {
    datePicker.classList.remove('hidden');
  },
  
  // 隐藏日期选择器
  hideDatePicker: function() {
    datePicker.classList.add('hidden');
  },
};

// 点击输入框时显示日期选择器
dateInput.addEventListener('click', () => {
  datePickerObj.initDatePicker();
});

// 点击取消按钮关闭日期选择器
cancelBtn.addEventListener('click', () => {
  datePickerObj.hideDatePicker();
});

// 点击确定按钮更新日期输入框的值，并关闭日期选择器
confirmBtn.addEventListener('click', () => {
  const year = parseInt(yearPicker.querySelector('select').value);
  const month = parseInt(monthPicker.querySelector('select').value);
  const day = parseInt(dayPicker.querySelector('select').value);
  dateInput.value = `${year}-${month}-${day}`;
  datePickerObj.hideDatePicker();
});