dlrdatepickerrange

日期范围选择

日历选择器：【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