例子
基本用法
<v-md-date-range-picker></v-md-date-range-picker>
使用 startDate 和 endDate 初始化
startDate 和 endDate 的月份相同
<v-md-date-range-picker
start-date="2019-01-01"
end-date="2019-01-02"
></v-md-date-range-picker>
= 1
endDate.month - startDate.month <v-md-date-range-picker
start-date="2019-01-01"
end-date="2019-02-02"
></v-md-date-range-picker>
> 1
endDate.month - startDate.month 这个也取决于你是否设置了:linkedCalendar 即左右两个日历是否联动
讨论:这里如果设置成联动了,该怎么处理比较好呢? 个人意见,因为是初始化,左右日历月份相差过大的情况并不是常见需求。因此更多的好似考虑常见需求,既然起 既然设置为联动,说明用户明确是想两者为联动。联动可以理解,如果设置了联动,结果却没有联动则会视为Bug
<v-md-date-range-picker
start-date="2019-01-01"
end-date="2019-03-02"
></v-md-date-range-picker>
need improvement
maxYear and minYear [minYear, maxYear] 的默认范围是 [当前年份 - 100,当前年份 + 100] 首先,你需要设置
showYearSelect
的值为true
TODO:
- [ ] 当前日历是 minYear 的 01 月的时候,点击 前一个月,日历可能显示错误
- [ ] 当前日历是 maxYear 的 12 月的时候,点击 下一个月,日历可能显示错误
<v-md-date-range-picker
start-date="2019-01-01"
end-date="2019-01-02"
max-year="2030"
min-year="2010"
show-year-select
></v-md-date-range-picker>
TODO
maxDate and minDate 快捷选项
Basic
<v-md-date-range-picker
start-date="2019-01-01"
end-date="2019-01-02"
></v-md-date-range-picker>
自定义快捷选项
showCustomRangeLabel
在预定义的快捷选项的下方是否显示 "Custom Range"。当日历中时间(start、end) 与 预定义的快捷选项任意一个都不匹配的时候,该选项会高亮选中。
autoApply
Boolean, default is
true
隐藏 apply 和 cancel 按钮,当 start 和 end 都被点击之后,会自动 emit 一个新的 date range
TODO
alwaysShowCalendars Position
opens
opens: ('left'/'right'/'center') 对齐方式
TODO:
- [ ] 现在只支持了箭头的位置,并没有支持下拉菜单的位置
← Installation API →