更新记录
1.0.6(2024-07-01) 下载此版本
更新默认状态年份显示问题
1.0.5(2024-07-01) 下载此版本
zdp-date-picker更新初始化季度显示问题,更新微信版本样式问题
1.0.4(2024-03-21) 下载此版本
修改日期格式
查看更多平台兼容性
Vue2 | Vue3 |
---|---|
√ | √ |
App | 快应用 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|
app-vue app-nvue | √ | √ | √ | √ | √ | √ |
钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 |
---|---|---|---|
√ | √ | √ | √ |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
√ | √ | √ | √ | √ | √ | √ | √ | √ |
zdp-date-picker使用说明
<zdp-date-picker ref="zdpdate" type="月" time="2023-2" @submit-date="handleDate($event)"></zdp-date-picker>
属性参数说明:
ref用于控制picker的弹出与隐藏,组件内有open和close函数
this.$refs.zdpdate.open()
参数名 | 作用 | 类型 | 默认值 |
---|---|---|---|
type | 控制打开piker时tabs默认显示的位置 | String | 月 |
time | 显示的默认日期 | String | 2023-1 |
type用于控制打开piker时显示的tabs;默认参数:日、周、月、季、年
time用于控制显示的默认日期;
type=“日” time="2024-1-23" 代表默认显示日、time代表选中日期2024年1月23日
type=“周” time=“2024-4” 代表默认显示周、time代表选中日期2024年第4周
type=“月” time=“2024-1” 代表默认显示月、time代表选中日期2024年1月
type=“季” time=“2024-1” 代表默认显示季、time代表选中日期2024年第1季度
type=“年” time=“2024” 代表默认显示年、time代表选中日期2024
事件返回参数说明:
事件名 | 作用 |
---|---|
submit-date | 用于接收组件返回的时间 |
submit-date 用于接收组件返回的时间
range 是选中日期的时间范围
zdpdate是具体的固定日期
type 是选中日期类型 日、周、月、季、年
handleDate(e){
let {range,zdpdate,type}=e
this.range=range
this.zdpdate=zdpdate
this.type=type
}
自定义插槽:
<zdp-date-picker ref="zdpdate" @submit-date="handleDate($event)">
//自定义显示组件内文字
<template #text="{scope}">
{{scope.range}}
{{scope.zdpdate}}
</template>
</zdp-date-picker>