vue2 自定义日期选择器

Vue 2 中自定义日期选择器通常通过组件化的方式来实现，可以利用 Vue 的灵活性来创建一个独立的日期选择组件。一种常见的做法是使用第三方库，如 vant-weapp、iview 或者 element-plus 提供的日期选择组件，它们都提供了丰富的 API 和样式定制选项。

如果你想要从头开始构建，你可以考虑以下几个步骤：

1. **结构设计**：创建一个单文件组件 (single-file component)，比如 `DateSelector.vue`，包含一个输入框用于显示当前选中的日期，以及相关的控制按钮（如“今天”、“过去”、“未来”等）。

<template>
  <div class="date-selector">
    <input type="text" v-model="selectedDate" :readonly="isReadonly" />
    <button @click="prevMonth">上月</button>
    <button @click="nextMonth">下月</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedDate: '',
      isReadonly: true,
    };
  },
  methods: {
    prevMonth() {
      this.updateSelectedDate(new Date(this.selectedDate).subtract(1, 'month'));
    },
    nextMonth() {
      this.updateSelectedDate(new Date(this.selectedDate).add(1, 'month'));
    },
    updateSelectedDate(date) {
      // 更新并设置输入框的值
      this.selectedDate = date.format('YYYY-MM-DD');
      this.isReadonly = false;
    },
  },
};
</script>

2. **样式定制**：添加 CSS 样式来自定义组件的外观，例如字体、颜色、布局等。

3. **交互处理**：根据业务需求编写事件监听器，比如用户点击日期时如何更新选中日期，或者如何禁用或启用读写状态。