日期范围选择

日历选择器：【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 [email protected])

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 |