正常组件封装，不需要第三方依赖

如果你想要在Vue2中不依赖第三方库直接对基础元素进行封装，可以手动创建一个简单的日期范围选择器组件。这里是一个基本的步骤示例：

1. **定义组件模板**：

<template>
  <div>
    <input
      type="text"
      ref="startDateInput"
      placeholder="开始日期"
      v-model="startDate"
    />
    -  
    <input
      type="text"
      ref="endDateInput"
      placeholder="结束日期"
      v-model="endDate"
    />
  </div>
</template>

2. **设置数据和计算属性**：

<script>
export default {
  data() {
    return {
      startDate: '',
      endDate: '',
    };
  },
};
</script>

3. **处理输入事件**：

<script>
export default {
  methods: {
    handleStartDateChange(e) {
      this.startDate = e.target.value;
    },
    handleEndDateChange(e) {
      this.endDate = e.target.value;
    },
  },
  watch: {
    $data() {
      // 可能需要检查日期有效性等
    },
  },
};
</script>

4. **提供API**：
为了外部组件调用，比如获取当前选择的日期范围，你可以添加一些props和methods：

<template>
  <!-- ... -->
  <button @click="getSelectedDates">获取选中的日期范围</button>
</template>

<script>
export default {
  props: ['onSelectDates'],
  methods: {
    getSelectedDates() {
      this.onSelectDates(this.startDate, this.endDate);
    },
  },
};
</script>

5. **外部使用**：
外部组件可以通过`v-bind`绑定属性和调用方法：

<my-date-range-input
  :on-select-dates="handleSelectedDates"
></my-date-range-input>

注意，这种方法相比Element UI这样的成熟UI库，灵活性较低，维护和功能可能会受限。如果需要复杂的功能和美观的界面设计，建议还是使用官方推荐的库。