更新记录
                                                                                                    
                                                    
                                                        1.0.10(2024-02-04)
                                                                                                                    
                                                                下载此版本
                                                            
                                                        
                                                    
                                                    滚动选择时间优化
                                                                                                    
                                                    
                                                        1.0.9(2023-10-14)
                                                                                                                    
                                                                下载此版本
                                                            
                                                        
                                                    
                                                    1、最大最小时间支持限制时分秒;
2、可选列生成优化。
                                                                                                    
                                                    
                                                        1.0.8(2023-08-10)
                                                                                                                    
                                                                下载此版本
                                                            
                                                        
                                                    
                                                    修复选择器打开后直接点击确定,日期返回undefined的bug
                                                                                                                                                    查看更多
                                                                                                
                                            
                                                                                                                                                        平台兼容性
                                                                                                                                                                                                                                                                                                                                uni-app
                                                                                                                                                                                                                                    
| Vue2 | 
Vue3 | 
Chrome | 
Safari | 
app-vue | 
app-nvue | 
Android | 
iOS | 
鸿蒙 | 
| √ | 
× | 
√ | 
√ | 
√ | 
- | 
- | 
- | 
- | 
                                                                                                                                                            
| 微信小程序 | 
支付宝小程序 | 
抖音小程序 | 
百度小程序 | 
快手小程序 | 
京东小程序 | 
鸿蒙元服务 | 
QQ小程序 | 
飞书小程序 | 
快应用-华为 | 
快应用-联盟 | 
| √ | 
- | 
- | 
- | 
- | 
- | 
- | 
- | 
- | 
- | 
- | 
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                其他
                                                                                                                                                                                                                                    
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            
                                            lingfeng-timepicker
基于picker-view、uni-popup的时间选择器,支持按年、月、日、时、分、秒、周、季度选择时间或时间范围,支持配置最大、最小选择日期
基本用法
在 template 中使用组件
<view @click="showPop()" class="show-time">选择年-月-日:{{defaultData.startTime}}</view>
<lingfeng-timepicker ref="timePop" type="date" :defaultData="defaultData" :minDate="minDate" :maxDate="maxDate"  @change="timeChange"></lingfeng-timepicker>
data(){
    return {
        defaultData:{
            startTime:'2023-02-20'
        },
        minDate:{
            year: 2020,
            month: 3,
            date: 5
        },
        maxDate:{
            year: 2025,
            month: 9,
            date: 20
        },
    }
},
methods: {
    showPop(){
        this.$refs.timePop.show();
    },
    timeChange(val){
        console.log(val); 
    }
}
组件属性
| 属性名 | 
类型 | 
默认值 | 
说明 | 
| type | 
String | 
date | 
选择时间类型,详见下文 type属性说明 | 
| minDate | 
Object | 
{ year: 1970, month: 1, date: 1, hour: 0, minute: 0, second: 0 } | 
最小可选择时间 | 
| maxDate | 
Object | 
{ year: 当前年份, month: 当前月份, date: 当前日期, hour: 23, minute: 59, second: 59 } | 
最大可选择时间 | 
| defaultData | 
Object | 
 | 
默认选择时间,详见下文 defaultData属性说明 | 
| toolBarTitle | 
String | 
"" | 
组件顶部标题 | 
| toolBarTitleClass | 
String | 
tool-title | 
组件顶部标题样式类名 | 
| cancelButtonText | 
String | 
取消 | 
组件顶部取消按钮文字 | 
| cancelButtonClass | 
String | 
cancel-btn | 
组件顶部取消按钮文字样式类名 | 
| confirmButtonText | 
String | 
确定 | 
组件顶部确定按钮文字 | 
| confirmButtonClass | 
String | 
confirm-btn | 
组件顶部确定按钮文字样式类名 | 
| rangeBtnStyle | 
Object | 
{color:'#666'} | 
范围选择按钮样式 | 
| rangeBtnActiveStyle | 
Object | 
{color:'#049bff',borderColor:'#049bff'} | 
范围选择按钮激活样式 | 
| popIindicatorStyle | 
Object | 
null | 
选择器中间选中框的样式 | 
| safeArea | 
Boolean | 
true | 
是否适配底部安全区(同uni-popup) | 
| en | 
Boolean | 
false | 
当type="week"时是否以国外的标准返回日期(以周日为一周的第一天) | 
| weekType | 
String | 
firstWeek | 
当type="week"时定义周的类型,详见下文 weekType属性说明 | 
组件事件
| 事件名 | 
说明 | 
返回值 | 
| @change | 
点击确定按钮事件 | 
详见下文 type属性说明 | 
| @close | 
弹窗关闭事件 | 
 | 
type属性说明
| 值 | 
时间格式 | 
@change返回值示例 | 
说明 | 
| year | 
yyyy | 
"2020" | 
选择年 | 
| year-month | 
yyyy-mm | 
"2020-02" | 
选择年、月 | 
| date | 
yyyy-mm-dd | 
"2020-02-20" | 
选择年、月、日 | 
| datetime | 
yyyy-mm-dd HH:MM | 
"2020-02-20    08:30" | 
选择年、月、日、时、分 | 
| datetime-all | 
yyyy-mm-dd HH:MM:SS | 
"2020-02-20    08:30:10" | 
选择年、月、日、时、分、秒 | 
| time | 
HH:MM:SS | 
"08:30:10" | 
选择时、分、秒 | 
| hour-minute | 
HH:MM | 
"08:30" | 
选择时、分 | 
| week | 
yyyy week | 
["2020 第1周", "2019-12-30", "2020-01-05"] | 
选择年、周 | 
| quarter | 
yyyy quarter | 
["2020 一季度", "2020-01-01", "2020-03-31"] | 
选择年、季度 | 
| year-range | 
yyyy | 
["2020", "2022"] | 
选择时间范围年 | 
| year-month-range | 
yyyy-mm | 
["2020-02", "2020-03"] | 
选择时间范围年、月 | 
| date-range | 
yyyy-mm-dd | 
["2020-02-20", "2020-03-20"] | 
选择时间范围年、月、日 | 
| datetime-range | 
yyyy-mm-dd HH:MM | 
["2020-02-20   08:30", "2020-03-20 08:30"] | 
选择时间范围年、月、日、时、分 | 
| datetime-all-range | 
yyyy-mm-dd HH:MM:SS | 
["2020-02-20   08:30:10", "2020-03-20  08:30:10"] | 
选择时间范围年、月、日、时、分、秒 | 
| time-range | 
HH:MM:SS | 
["08:30:10", "09:30:10"] | 
选择时间范围时、分、秒 | 
defaultData属性说明
| 属性名 | 
类型 | 
时间格式 | 
默认值 | 
说明 | 
| year | 
String | 
yyyy | 
当前年 | 
默认展示的年份,仅 type="year" 时生效 | 
| month | 
String | 
yyyy-mm | 
当前年月 | 
仅 type="year-month" 时生效 | 
| startTime | 
String | 
yyyy(-mm-dd) (HH:MM:SS) | 
当前日期(时间) | 
当type!="year/year-month/quarter" 时生效 | 
| endTime | 
String | 
yyyy(-mm-dd) (HH:MM:SS) | 
当前日期(时间) | 
当 type="year-range/year-month-range/date-range/datetime-range/datetime-all-range/time-range" 时生效 | 
| week | 
String | 
yyyy week | 
最小可选择年 周 | 
仅 type="week" 时生效 | 
| quarter | 
String | 
yyyy quarter | 
最小可选择年 季度 | 
仅 type="quarter" 时生效 | 
weekType属性说明
| 属性值 | 
说明 | 
| firstWeek | 
以当前年第一天所在的周为第一周计算,以2023年为例,第一周返回的日期为['2023 第1周', '2022-12-26', '2023-01-01'] | 
| fullWeek | 
以当前年第一个完整周为第一周计算,以2023年为例,第一周返回的日期为['2023 第1周', '2023-01-02', '2023-01-08'] | 
| firstDay | 
以当前年第一天为第一周的第一天计算,以2023年为例,第一周返回的日期为['2023 第1周', '2023-01-01', '2023-01-07'] | 
联系作者
: