LamboDateRange 日期范围

介绍

LamboDateRange 是一个基于vant拓展的日期范围选择组件（月份范围、年份范围），填补了date-picker日期选择组件的时间区间选择的空缺。

引入

import Vue from 'vue';
import LamboDateRange from '@lambo-design-mobile/lambo-date-range';

Vue.use(LamboDateRange);

代码演示

月份区间选择(默认时间)

<LamboDateRange title="开始结束月份" @sure-date="sureDate" :default-value="['2024/04','2024/06']" read-only></LamboDateRange>

月份区间选择

<LamboDateRange title="开始结束月份" @sure-date="sureDate" required></LamboDateRange>

年区间选择

<LamboDateRange title="开始结束年份" range-type="year" @sure-date="sureDate" required></LamboDateRange>

年区间选择(默认时间)

<LamboDateRange title="开始结束年份" range-type="year" @sure-date="sureDate" :default-value="['2020','2025']"></LamboDateRange>

API

Props

| 参数 | 说明 | 类型 | 默认值 | 版本 | |------|------|------|------|------| | title | 标题 | string | 请选择日期范围 | - | | defaultValue | 初始值 | string | defaultValue示例 [2024/01,2024/11];[2023,2024] | | | rangeType | 选择类型，month表示选择月份范围，year代表年份范围 | month | - | | | readonly | 是否只读 | boolean | false | | | minDate | 最早日期 | date | | | | maxDate | 最晚日期 | date | | | | required | 是否必填 | boolean | false | |

Events

| 事件名 | 说明 | 回调参数 | |------|------|------| | sure-date | 选择确认后触发 | array(选择的开始结束时间): Array ['2023/01','2024/02'];['2023','2024']|