TimeComponentsUp

一个Vue.js日期区间选择组件，支持键盘导航和快捷选项。

安装

npm install time-components-up

使用

全局注册

import Vue from 'vue';
import TimeComponentsUp from 'time-components-up';

Vue.component('time-components-up', TimeComponentsUp);

局部注册

<template>
  <div>
    <TimeComponentsUp @changeTime="handleChange" />
  </div>
</template>

<script>
import TimeComponentsUp from 'time-components-up';

export default {
  components: {
    TimeComponentsUp
  },
  methods: {
    handleChange(dates) {
      console.log('Selected dates:', dates);
    }
  }
}
</script>

Props

| 属性名 | 类型 | 默认值 | 说明 | | --- | --- | --- | --- | | initTime | String | '' | 初始化时间范围，格式为 "YYYY-MM-DD ~ YYYY-MM-DD" |

Events

| 事件名 | 参数 | 说明 | | --- | --- | --- | | changeTime | Array | 当时间范围改变时触发，返回包含开始和结束日期的数组 |

功能

• 日期区间选择
• 键盘导航支持
• 快捷选项（今天、昨天、本周、本月、近3月、近1年）
• 双日历面板展示
• 支持Vue 2和Vue 3

注意事项

该组件依赖Element UI的输入框组件，使用前请确保已安装Element UI：

npm install element-ui