1.0.3 • Published 4 years ago
dlrdatepickerrange v1.0.3
日期范围选择
日历选择器:【m端日历,无依赖性】 1: 支持跨年设置,可设置最小年月、最大年月 2: 按月 周维度查询,支持周跨月情景查询 备注: 使用插件前请确认是否满足业务需求,如有合理的个性化需求,控件会考虑后期整理迭代
体积: 40K
git 地址:
https://git.corpautohome.com/gp_rd_fe_dealer/Dealer_Components/commits/picker
cdn 地址:
<script src="https://s.autoimg.cn/dealer/m/dealerUI/dlrvue/vue/vue.min.js"></script>
<script src="https://s.autoimg.cn/dealer/m/dealerUI/dlrvue/datePickerRange/datePickerRange.min.0.0.1.js"></script>
demo 页
http://10.168.66.123:9090/out/dealerUI/demo/components/picker
node 环境引入
1:安装
npm install dlrpicker (如指定版本号:npm install dlrpicker@0.0.2)
2:引入并注册
import Vue from 'vue'
import dlrDatePickerRange from 'dlrdatepickerrange'
Vue.use(dlrDatePickerRange)
例子
代码示例
<section class="page-wraper">
<div class="dlr-formlist-link">
<button @click="showDatePickerRange()">
经销商-日历控件【周范围】
</button>
</div>
<dlr-date-picker-range ref="picker"
v-model="picker.show"
:format="picker.format"
:title="'选择周期'"
:start-date="picker.start"
:end-date="picker.end"
@on-select="dateConfirmHandler">
</dlr-date-picker-range>
</section>
</template>
<script>
export default {
data() {
return {
picker: {
format:'yyyy-mm-rg',
show: false,
start: new Date(2017, 10, 5),
end: new Date(2020, 2, 1)
}
}
},
mounted() {
},
methods:{
showDatePickerRange() {
this.picker.show = true
},
dateConfirmHandler: function (data) {
console.log(data)
}
}
}
</script>
API
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
title | 显示标题 | String | 见demo | |
start-date | 开始日期 | Date | 见demo | |
end-date | 结束日期 | Date | 见demo | |
v-model | 显示、关闭控件 | Boolean | 见demo | |
format | 格式 | String | 'yyyy-mm-rg' | 见demo |
Event
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
on-select | 日历选择回调 | 见demo |
1.0.3
4 years ago