更新记录

1.1.0(2024-03-21)

兼容vue3

1.0.9(2024-03-20)

input样式优化

1.0.8(2024-03-20)

修复了input点击问题

查看更多

平台兼容性

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

pyh-rdtPicker 日期区间选择器

可进行多粒度的时间选择器,组件名:pyh-rdtpicker,代码块: rangeDatePick。

使用方式:

script 中引用组件

import rangeDatePick from '@/components/pyh-rdtpicker/pyh-rdtpicker.vue';
export default {
    components: {rangeDatePick}
}

template 中使用组件

<rangeDatePick 
    :show="isShow"
    @showchange="showchange"
    :start="start"
    :end="end"
    :value="value"
    @change="bindChange"
    @cancel="bindCancel"
    themeColor="#4C83D6"
    fields="month"
></rangeDatePick>

pdtPicker 属性说明:

属性名 类型 默认值 说明
themeColor String '#4C83D6' 主题色
start String '1900-01-01' 限制选择器选择的最小时间 (只支持年限制),粒度格式和value格式要相符,否则会有错误提示
end String '2200-12-01' 限制选择器选择的最大时间(只支持年限制),粒度格式和value格式要相符,否则会有错误提示
value Array '' 当前日期选择器显示的时间 ,粒度格式和value格式要相符,否则会又错误提示
fields String 'day' 当前日期选择器粒度:year/month/day

value 值说明:

类型 说明
[] Array 当前日期选择器为开始时间的默认值
['1900-01-01'] Array 当前日期选择器开始时间为1900-01-01
['1900-01-01','2010-12-01'] Array 当前日期选择器开始时间为1900-01-01,结束时间为2010-12-01

事件说明:

事件名称 说明
showchange 必传,用于控制显示隐藏
change 时间选择器点击【确定】按钮时时触发的事件,参数为选择器的当前的 value
cancel 时间选择器点击【取消】按钮时时触发的事件

showchange事件说明:

showchange(){ this.isShow=!this.isShow; }

更新记录:

1.0.6:添加动态修改start和end,示例项目由新增注释

1.0.5:修复月份切换时,day存在显示undefined的问题;修复小程序value设置后滚动位置不对的问题

1.0.4:修复滚动穿透;修改默认fields为day,添加了同年限制月份(start和end同年,有月份限制),改正作者名与组件名字

1.0.3:修复动态的value不能赋值问题;修复end值的可选值与实际填入的end值小一年问题

1.0.2:优化了开始日期和结束日期的切换,当前版本切换时会显示更合适的日期;添加了粒度选择,现支持year/month/day;修复了demo的getDate -60年的获取问题

1.0.1:新增组件——日期区间选择器

感谢:

有更多优化建议和需求,请联系作者panyh。谢谢!

隐私、权限声明

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

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

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

许可协议

MIT协议

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