1.0.3 • Published 4 years ago

dlrdatepickerrange v1.0.3

Weekly downloads
1
License
MIT
Repository
-
Last release
4 years ago

日期范围选择

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