LamboDatePicker 日期

介绍

LamboDatePicker 是一个日期组件，基于vant,对一些日期选择场景进行了封装，包括日期单选，日期区间，日期多选，月份单选，年份单选，并可以根据指定格式获取选择日期。

引入

import Vue from 'vue';
import LamboDatePicker from '@lambo-design-mobile/lambo-date-picker';

Vue.use(LamboDatePicker);

代码演示

日期区间用法

<LamboDatePicker title="开始结束日期" dateType="range" type="date" @sure-date="sureDate" formatDateStr="YYYY-MM-DD"></LamboDatePicker>

日期单选

<LamboDatePicker title="选择日期" dateType="single" type="date" @sure-date="sureDate"></LamboDatePicker>

月份单选

<LamboDatePicker title="选择月份" dateType="single" type="month" @sure-date="sureDate"></LamboDatePicker>

年份单选

<LamboDatePicker title="选择年份" dateType="single" type="year" @sure-date="sureDate"></LamboDatePicker>

API

Props

| 参数 | 说明 | 类型 | 默认值 | 版本 | |------|------|------|------|------| | title | 标题 | string | 请选择日期 | - | | value | 初始值 | string | - | | | must | 是否必填 | Boolean | false | - | | type | 类型，date日期，month:月份，year:年份 | date | - | | | dateType | 选择类型，single表示选择单个日期，multiple表示选择多个日期，range表示选择日期区间 | range | - | | | dateShowConfirm | 是否显示确认按钮 | bool | true | | | readonly | 是否只读 | bool | false | | | allowSameDay | 是否允许日期范围的起止时间为同一天 | bool | true | | | calendarColor | 日历颜色 | string | #2d8cf0 | | | calendarcConfirmText | 确认按钮文字 | string | | | | calendarcConfirmDisabledText | 确认按钮禁用状态文字 | string | | | | positionCalendar | 日历位置 | string | bottom | | | maxRange | 日期区间时，设置最多可选天数 | [String, Array]| | | | firstDayOfWeek | 设置周起始日 | String, Array | | | | minDate | 最早日期 | date | | | | maxDate | 最晚日期 | date | | | | formatDateStr | 日期格式 | string | 'YYYY/MM/DD' | | | showDatePicker | 显示日历 | bool | false | | | showVanCell | 显示cell | bool | true | |

Events

| 事件名 | 说明 | 回调参数 | |------|------|------| | sure-date | 选择确认后触发 | event: Event | | close-date | 关闭日历触发 | event: Event |