iview 使用calendar实现日历

iView是一个基于Vue.js的前端组件库，它提供了一个叫做`Calendar`的日历组件，可以帮助开发者轻松地在网页上展示和选择日期。使用iview的Calendar组件步骤如下：

1. **安装**：首先需要在项目中安装iview库，可以使用npm或yarn命令：

   npm install iview --save
   # 或者
   yarn add iview

2. **导入并注册**：在你的Vue文件中，引入`Calendar`组件并添加到组件模板中：

   <template>
     <div>
       <i-calendar :options="calendarOptions" @on-change="handleChange"></i-calendar>
     </div>
   </template>

   <script>
   import Calendar from 'iview/dist/components/calendar/Calendar.vue';
   export default {
     components: { Calendar },
     data() {
       return {
         calendarOptions: {}, // 初始化配置项
       };
     },
     methods: {
       handleChange(date) {
         console.log('选择的日期:', date);
       },
     },
   };
   </script>

3. **配置选项**：设置`calendarOptions`属性来定制日历的行为，如初始显示日期、范围等：

   data() {
     return {
       calendarOptions: {
         value: '', // 初始选中的日期
         type: 'daterange', // 可以为'date'单个日期，'daterange'日期范围
         startPlaceholder: '开始日期',
         endPlaceholder: '结束日期',
         rangeState: {} // 预设的日期范围
       }
     };
   },

4. **处理事件**：通过监听`@on-change`事件，在用户选择日期后获取所选日期。