SPA 页面中日期时间选择器组件的开发和封装

在前端开发中，日期时间选择器是一个非常常见的组件之一。本文将会介绍如何开发和封装一个可复用的 SPA 页面中日期时间选择器组件。

功能需求

在开发日期时间选择器组件之前，我们需要明确组件所需的功能需求。对于一个日期时间选择器，主要需要下面这些功能：

1. 显示当前日期和时间；
2. 可选择日期和时间；
3. 根据选择的日期和时间更改日期时间文本框的值；
4. 可以通过实时更新的方式显示当前时间。

技术选型

为了实现这些功能，我们需要使用以下技术：

1. HTML，用于组件的结构；
2. CSS， 用于组件的样式；
3. JavaScript，用于组件的逻辑控制。

其中，我们将使用 Vue.js ，一个功能强大的 JavaScript 框架，来实现组件的逻辑控制。通过 Vue.js 的组件化开发方式，我们可以更好地组织代码，提高代码的可维护性。

组件设计

在开始编写代码之前，我们需要进行组件设计。我们的组件将包含以下内容：

1. 输入框，用于显示选择的日期和时间；
2. 下拉框，用于选择日期和时间；
3. 实时更新的时间显示区域。

组件实现

我们可以先创建一个组件，然后分别实现上面设计的三个部分：

// javascriptcn.com 代码示例
<template>
  <div class="datetime-picker">
    <input type="text" class="datetime-input"/>
    <div class="datetime-dropdown">
      <div class="datetime-date">
        <label>日期：</label>
        <select class="datetime-select"></select>
      </div>
      <div class="datetime-time">
        <label>时间：</label>
        <select class="datetime-select"></select>
      </div>
    </div>
    <div class="datetime-current-time">
      <label>当前时间：</label>
      <span class="datetime-time-value"></span>
    </div>
  </div>
</template>

在这个模板中，我们创建了一个 datetime-picker 的 div 组件，通过 input 标签实现了日期时间文本框，通过下拉框实现了选择日期和时间的功能，通过 span 标签实现了实时更新的时间显示区域。

接下来，我们需要在 JavaScript 中实现组件的逻辑控制：

// javascriptcn.com 代码示例
<template>
  <div class="datetime-picker">
    <input type="text" class="datetime-input"/>
    <div class="datetime-dropdown">
      <div class="datetime-date">
        <label>日期：</label>
        <select class="datetime-select"></select>
      </div>
      <div class="datetime-time">
        <label>时间：</label>
        <select class="datetime-select"></select>
      </div>
    </div>
    <div class="datetime-current-time">
      <label>当前时间：</label>
      <span class="datetime-time-value"></span>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 存储选择的日期和时间
      date: '',
      time: '',
      // 存储当前时间
      currentTime: ''
    }
  },
  methods: {
    // 初始化日期和时间选择器
    initDatetimePicker() {
      // 获取日期和时间下拉框
      const dateSelect = document.querySelector('.datetime-dropdown .datetime-date select');
      const timeSelect = document.querySelector('.datetime-dropdown .datetime-time select');

      // 添加日期和时间选项
      for (let i = 0; i < 31; i++) {
        const option = document.createElement('option');
        const date = new Date(2021, 7, i + 1);
        option.innerText = `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`;
        option.value = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
        dateSelect.appendChild(option);
      }

      for (let i = 0; i < 24; i++) {
        const option = document.createElement('option');
        option.innerText = `${i < 10 ? '0' + i : i}:00`;
        option.value = i;
        timeSelect.appendChild(option);
      }

      // 监听日期和时间下拉框的变化
      dateSelect.addEventListener('change', () => {
        this.date = dateSelect.value;
        this.updateDatetimeInput();
      });

      timeSelect.addEventListener('change', () => {
        this.time = timeSelect.value;
        this.updateDatetimeInput();
      });

      // 实时更新当前时间
      setInterval(() => {
        const now = new Date();
        const hour = now.getHours();
        const minute = now.getMinutes();
        const second = now.getSeconds();
        this.currentTime = `${hour < 10 ? '0' + hour : hour}:${minute < 10 ? '0' + minute : minute}:${second < 10 ? '0' + second : second}`;
      }, 1000);
    },
    // 更新日期时间文本框的值
    updateDatetimeInput() {
      const datetimeInput = document.querySelector('.datetime-input');
      datetimeInput.value = `${this.date} ${this.time}:00`;
    }
  },
  mounted() {
    // 初始化日期和时间选择器
    this.initDatetimePicker();
  }
}
</script>

在这个 JavaScript 中，我们创建了 data 数据，存储选择的日期和时间、当前时间等信息。通过 initDatetimePicker() 方法，初始化日期和时间下拉框，并监听其变化；并通过 updateDatetimeInput() 方法更新日期时间文本框的值。同时，我们也通过 setInterval() 方法来实现实时更新的时间显示区域。

最后，我们需要添加样式代码，实现组件的样式：

// javascriptcn.com 代码示例
.datetime-picker {
  position: relative;
}

.datetime-dropdown {
  position: absolute;
  left: 0;
  top: 100%;
  background-color: #fff;
  border: 1px solid #ccc;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .3);
  display: none;
}

.datetime-dropdown.active {
  display: block;
}

.datetime-date,
.datetime-time {
  display: flex;
}

.datetime-date label,
.datetime-time label {
  width: 50px;
  text-align: right;
  padding-right: 5px;
  margin-top: 5px;
}

.datetime-select {
  border: none;
  background-color: transparent;
  font-size: 1em;
  margin-top: 5px;
  margin-left: 5px;
}

.datetime-input {
  width: 220px;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 3px;
  font-size: 1em;
  outline: none;
}

.datetime-current-time {
  position: absolute;
  right: 0;
  top: 100%;
  font-size: 1em;
  margin-top: 10px;
}

.datetime-time-value {
  color: #ff5500;
}

封装组件

为了让这个组件更加灵活和可复用，我们可以将其封装成一个 Vue.js 组件，并将其发布到 npm 上，以便其他人使用：

// javascriptcn.com 代码示例
<template>
  <div class="datetime-picker">
    <input type="text" class="datetime-input"/>
    <div class="datetime-dropdown">
      <div class="datetime-date">
        <label>日期：</label>
        <select class="datetime-select"></select>
      </div>
      <div class="datetime-time">
        <label>时间：</label>
        <select class="datetime-select"></select>
      </div>
    </div>
    <div class="datetime-current-time">
      <label>当前时间：</label>
      <span class="datetime-time-value"></span>
    </div>
  </div>
</template>
<script>
export default {
  name: 'VueDateTimePicker',
  data() {
    return {
      // 存储选择的日期和时间
      date: '',
      time: '',
      // 存储当前时间
      currentTime: ''
    }
  },
  methods: {
    /**
     * 初始化日期时间选择器
     * @param {Object} options
     */
    initDatetimePicker(options) {
      // 获取日期和时间下拉框
      const dateSelect = this.$el.querySelector('.datetime-dropdown .datetime-date select');
      const timeSelect = this.$el.querySelector('.datetime-dropdown .datetime-time select');

      // 获取组件属性
      const dateFormat = options.dateFormat || 'yyyy-MM-dd';
      const timeFormat = options.timeFormat || 'hh:mm';
      const showCurrentTime = options.showCurrentTime !== undefined ? options.showCurrentTime : true;

      // 添加日期和时间选项
      for (let i = 0; i < 31; i++) {
        const option = document.createElement('option');
        const date = new Date(2021, 7, i + 1);
        option.innerText = `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日`;
        option.value = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
        dateSelect.appendChild(option);
      }

      for (let i = 0; i < 24; i++) {
        const option = document.createElement('option');
        option.innerText = `${i < 10 ? '0' + i : i}:00`;
        option.value = i;
        timeSelect.appendChild(option);
      }

      // 监听日期和时间下拉框的变化
      dateSelect.addEventListener('change', () => {
        this.date = dateSelect.value;
        this.updateDatetimeInput(dateFormat, timeFormat);
      });

      timeSelect.addEventListener('change', () => {
        this.time = timeSelect.value;
        this.updateDatetimeInput(dateFormat, timeFormat);
      });

      // 实时更新当前时间
      if (showCurrentTime) {
        setInterval(() => {
          const now = new Date();
          const hour = now.getHours();
          const minute = now.getMinutes();
          const second = now.getSeconds();
          this.currentTime = `${hour < 10 ? '0' + hour : hour}:${minute < 10 ? '0' + minute : minute}:${second < 10 ? '0' + second : second}`;
        }, 1000);
      }
    },
    /**
     * 更新日期时间文本框的值
     * @param {String} dateFormat
     * @param {String} timeFormat
     */
    updateDatetimeInput(dateFormat, timeFormat) {
      const datetimeInput = this.$el.querySelector('.datetime-input');
      const datetime = new Date(`${this.date} ${this.time}:00`);
      datetimeInput.value = datetimeFormat(datetime, dateFormat, timeFormat);
    }
  },
  mounted() {
    // 初始化日期和时间选择器
    this.initDatetimePicker(this.$options.propsData);
  },
  props: {
    dateFormat: {
      type: String,
      default: 'yyyy-MM-dd'
    },
    timeFormat: {
      type: String,
      default: 'hh:mm'
    },
    showCurrentTime: {
      type: Boolean,
      default: true
    }
  }
}

/**
 * 格式化日期时间
 * @param {Date} datetime
 * @param {String} dateFormat
 * @param {String} timeFormat
 * @returns {String}
 */
function datetimeFormat(datetime, dateFormat, timeFormat) {
  const year = datetime.getFullYear();
  const month = datetime.getMonth() + 1;
  const date = datetime.getDate();
  const hour = datetime.getHours() < 10 ? '0' + datetime.getHours() : datetime.getHours();
  const minute = datetime.getMinutes() < 10 ? '0' + datetime.getMinutes() : datetime.getMinutes();
  const second = datetime.getSeconds() < 10 ? '0' + datetime.getSeconds() : datetime.getSeconds();
  let str = dateFormat.replace('yyyy', year);
  str = str.replace('MM', month < 10 ? `0${month}` : month);
  str = str.replace('dd', date < 10 ? `0${date}` : date);
  str = str.replace('hh', hour < 10 ? `0${hour}` : hour);
  str = str.replace('mm', minute < 10 ? `0${minute}` : minute);
  str = str.replace('ss', second < 10 ? `0${second}` : second);
  return str;
}

在这个封装后的代码中，我们实现了格式化日期时间的方法 datetimeFormat()，并将之前的逻辑封装为组件方法 initDatetimePicker() 和 updateDatetimeInput()。同时，我们也添加了 props 属性，用于接收组件属性参数，使得组件更加灵活和可配置。

总结

本文介绍了如何开发和封装 SPA 页面中日期时间选择器组件。通过分析组件的功能需求、选择技术和设计组件结构，最终实现了一个可复用的日期时间选择器组件，并通过封装将其发布到 npm 上，便于其他人使用。这一过程，不仅有很好的学习意义，也为后续的开发工作提供了重要的指导意义。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6544c9d87d4982a6ebe9e045