更新记录

1.0.0(2021-09-27)

组件发布


平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
app-vue ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× ×

term-picker

  • 日期范围选择,颗粒度为年-月-日
  • 根据实际开发需求完成,分享出来希望有帮助。
  • 最新的项目示例代码可在GitHub获取。

使用方法

script 中引用组件

import termPicker from '@/components/term-picker/term-picker.vue'
export default {
  components: {
    termPicker
  }
}

template 中使用组件

<term-picker
  :visable.sync="pickerVisable"
  :defaultDate="defaultDate"
  :minYear="1990"
  :timeLimit="false"
  :deferYear="0"
  themeColor="#10BE9D"
  startText="开始时间"
  endText="结束时间"
  @confirm="confirm">
</term-picker>

Props 参数说明

参数名 类型 默认值 说明
visable Boolean false 日期选择控件的显示/隐藏,注意使用.sync修饰符(true: 显示; false: 隐藏)
defaultDate Array [] 默认预设值(比如:['2021-06-01', '2021-07-01'])
minYear Number 1990 最小年份
timeLimit Boolean false 日期区间限制(true: 限制结束日期<=当前日期; false: 不限制)
deferYear Number 0 年份选项顺延数,仅当timeLimitfalse时生效(举个栗子: deferYear = 1, 则年份选项的最大值为: 当前年份 + deferYear)
themeColor String #10BE9D 选择框操作栏部分字体颜色
startText String 开始时间 日期范围起始处文本
endText String 结束时间 日期范围结束处文本

Events 事件说明

事件名 说明 返回值
@confirm 点击确定按钮,返回当前选择的值 Array数组类型

Demo 代码示例

<template>
  <view class="content">
    <term-picker
      :visable.sync="pickerVisable"
      :defaultDate="defaultDate"
      @confirm="confirm">
    </term-picker>
  </view>
</template>

<script>
  import sofarPicker from '@/components/term-picker/term-picker.vue'
  export default {
    components: {
      sofarPicker
    },
    data() {
      return {
        pickerVisable: false,
        defaultDate: ['2020-01-01', '2021-01-01']
      }
    },
    methods: {
      // 打开日期选择框
      openPicker() {
        this.pickerVisable = true
      },
      // 点击确定按钮,返回当前选择的值
      confirm(date) {
        console.log(date) // ['2021-06-01', '2021-07-01']
      }
    }
  }
</script>

<style>
  .content{
    width: 100%;
    height: 100%;
  }
</style>

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问