Moment.js - 一个创造选择日期的日期选择工具

2023-09-10 14:53:08

Moment.js是一个轻量级且功能强大的JavaScript日期库，可用于处理、解析、格式化和操作日期。它在web开发中非常受欢迎，尤其是在需要处理日期和时间相关任务时。

Moment.js提供了一个简单的API，使得开发人员可以轻松地操作日期，例如获取当前日期、添加或减少天数、月份或年份，格式化日期，以及比较日期等。

在本文中，我们将演示如何使用Moment.js创建一个日期选择工具，允许用户选择最近几天、几周、几月、几季或几年。

代码实现

// 定义变量来存储日期选择框的元素
const datePicker = document.querySelector('#datePicker');

// 定义变量来存储最近日期的选择器元素
const recentDates = document.querySelector('#recentDates');

// 定义变量来存储日期选择框的输入值
let dateNum;
let dateStr;

// 当日期选择框发生变化时触发该函数
datePicker.addEventListener('change', (event) => {
  // 获取日期选择框的输入值
  dateNum = event.target.value;

  // 获取日期选择框的选择值
  dateStr = event.target.selectedOptions[0].value;

  // 根据选择的值，设置最近日期的选择器元素的值
  switch (dateStr) {
    case 'days':
      recentDates.value = moment().subtract(dateNum, 'days').format('YYYY-MM-DD');
      break;
    case 'weeks':
      recentDates.value = moment().subtract(dateNum, 'weeks').format('YYYY-MM-DD');
      break;
    case 'months':
      recentDates.value = moment().subtract(dateNum, 'months').format('YYYY-MM-DD');
      break;
    case 'quarters':
      recentDates.value = moment().subtract(dateNum, 'quarters').format('YYYY-MM-DD');
      break;
    case 'years':
      recentDates.value = moment().subtract(dateNum, 'years').format('YYYY-MM-DD');
      break;
  }
});