前言:
在小程序中,往往查询历史或者需要时间查询的情景下,都需要用到picker组件,PC端的这种组件非常多,但是小程序中相对较少,不支持多选(除非自己封装),那么单选我们不得不考虑picker。
正文:
- 效果图:
picker
- API文档:
基础库 1.0.0 开始支持,低版本需做兼容处理。
从底部弹起的滚动选择器。
属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
---|---|---|---|---|---|
header-text | string | 否 | 选择器的标题,仅安卓可用 | 2.11.0 | |
mode | string | selector | 否 | 选择器类型 | 1.0.0 |
disabled | boolean | false | 否 | 是否禁用 | 1.0.0 |
bindcancel | eventhandle | 否 | 取消选择时触发 | 1.9.90 |
mode 的合法值
值 | 说明 | 最低版本 |
---|---|---|
selector | 普通选择器 | |
multiSelector | 多列选择器 | |
time | 时间选择器 | |
date | 日期选择器 | |
region | 省市区选择器 |
除了上述通用的属性,对于不同的mode,picker
拥有不同的属性。
普通选择器:mode = selector
属性名 | 类型 | 默认值 | 说明 | 最低版本 |
---|---|---|---|---|
range | array/object array | [] | mode 为 selector 或 multiSelector 时,range 有效 | |
range-key | string | 当 range 是一个 Object Array 时,通过 range-key 来指定 Object 中 key 的值作为选择器显示内容 | ||
value | number | 0 | 表示选择了 range 中的第几个(下标从 0 开始) | |
bindchange | eventhandle | value 改变时触发 change 事件,event.detail = {value} |
多列选择器:mode = multiSelector
属性名 | 类型 | 默认值 | 说明 | 最低版本 |
---|---|---|---|---|
range | array/object array | [] | mode 为 selector 或 multiSelector 时,range 有效 | |
range-key | string | 当 range 是一个 Object Array 时,通过 range-key 来指定 Object 中 key 的值作为选择器显示内容 | ||
value | array | [] | 表示选择了 range 中的第几个(下标从 0 开始) | |
bindchange | eventhandle | value 改变时触发 change 事件,event.detail = {value} | ||
bindcolumnchange | eventhandle | 列改变时触发 |
时间选择器:mode = time
属性名 | 类型 | 默认值 | 说明 | 最低版本 |
---|---|---|---|---|
value | string | 表示选中的时间,格式为"hh:mm" | ||
start | string | 表示有效时间范围的开始,字符串格式为"hh:mm" | ||
end | string | 表示有效时间范围的结束,字符串格式为"hh:mm" | ||
bindchange | eventhandle | value 改变时触发 change 事件,event.detail = {value} |
日期选择器:mode = date
属性名 | 类型 | 默认值 | 说明 | 最低版本 |
---|---|---|---|---|
value | string | 0 | 表示选中的日期,格式为"YYYY-MM-DD" | |
start | string | 表示有效日期范围的开始,字符串格式为"YYYY-MM-DD" | ||
end | string | 表示有效日期范围的结束,字符串格式为"YYYY-MM-DD" | ||
fields | string | day | 有效值 year,month,day,表示选择器的粒度 | |
bindchange | eventhandle | value 改变时触发 change 事件,event.detail = {value} |
fields 有效值:*
值 | 说明 |
---|---|
year | 选择器粒度为年 |
month | 选择器粒度为月份 |
day | 选择器粒度为天 |
省市区选择器:mode = region 1.4.0
属性名 | 类型 | 默认值 | 说明 | 最低版本 |
---|---|---|---|---|
value | array | [] | 表示选中的省市区,默认选中每一列的第一个值 | |
custom-item | string | 可为每一列的顶部添加一个自定义的项 | 1.5.0 | |
bindchange | eventhandle | value 改变时触发 change 事件,event.detail = {value, code, postcode},其中字段 code 是统计用区划代码,postcode 是邮政编码 |
- 引入js文件:dateTimePicker.js
function withData(param){
return param < 10 ? '0' + param : '' + param;
}
function getLoopArray(start,end){
var start = start || 0;
var end = end || 1;
var array = [];
for (var i = start; i <= end; i++) {
array.push(withData(i));
}
return array;
}
function getMonthDay(year,month){
var flag = year % 400 == 0 || (year % 4 == 0 && year % 100 != 0), array = null;
switch (month) {
case '01':
case '03':
case '05':
case '07':
case '08':
case '10':
case '12':
array = getLoopArray(1, 31)
break;
case '04':
case '06':
case '09':
case '11':
array = getLoopArray(1, 30)
break;
case '02':
array = flag ? getLoopArray(1, 29) : getLoopArray(1, 28)
break;
default:
array = '月份格式不正确,请重新输入!'
}
return array;
}
function getNewDateArry(){
// 当前时间的处理
var newDate = new Date();
var year = withData(newDate.getFullYear()),
mont = withData(newDate.getMonth() + 1),
date = withData(newDate.getDate()),
hour = withData(newDate.getHours()),
minu = withData(newDate.getMinutes()),
seco = withData(newDate.getSeconds());
return [year, mont, date, hour, minu, seco];
}
function dateTimePicker(startYear,endYear,date) {
// 返回默认显示的数组和联动数组的声明
var dateTime = [], dateTimeArray = [[],[],[],[],[],[]];
var start = startYear || 1978;
var end = endYear || 2100;
// 默认开始显示数据
var defaultDate = date ? [...date.split(' ')[0].split('-'), ...date.split(' ')[1].split(':')] : getNewDateArry();
// 处理联动列表数据
/*年月日 时分秒*/
dateTimeArray[0] = getLoopArray(start,end);
dateTimeArray[1] = getLoopArray(1, 12);
dateTimeArray[2] = getMonthDay(defaultDate[0], defaultDate[1]);
dateTimeArray[3] = getLoopArray(0, 23);
dateTimeArray[4] = getLoopArray(0, 59);
dateTimeArray[5] = getLoopArray(0, 59);
dateTimeArray.forEach((current,index) => {
dateTime.push(current.indexOf(defaultDate[index]));
});
return {
dateTimeArray: dateTimeArray,
dateTime: dateTime
}
}
module.exports = {
dateTimePicker: dateTimePicker,
getMonthDay: getMonthDay
}
- 正文代码:
- wxml(html):
<view class="historyQuery" style="position: fixed;top: 40px;left: 0;width: 100%;"> <view class="chooseDate"> <view class="startDate"> <picker mode="multiSelector" :value="startdateTime" @change="changestartDateTime" @columnchange="changeDateTimeColumn" :range="startdateTimeArray" class="pI"> <view class="picker">{{historyForm.startTime}}</view> </picker> </view> <view class="dateText">至</view> <view class="endDate"> <picker mode="multiSelector" :value="enddateTime" @change="changeendDateTime" @columnchange="changeDateTimeColumn" :range="enddateTimeArray" class="pI"> <view class="picker">{{historyForm.endTime}}</view> </picker> </view> <view class="searchBtn" @click="getHistoryData">查询</view> </view> </view>
- wxss(css):
.chooseDate { display: flex; flex-flow: row nowrap; align-items: baseline; box-sizing: border-box; padding: 0 20px; text-align: center; } .chooseDate .dateText { display: inline-block; font-size: 23rpx; color: #262626; vertical-align: top; margin-top: 5rpx; margin: 5rpx 15rpx 0 15rpx; } .chooseDate .startDate, .chooseDate .endDate { padding: 10rpx; display: inline-block; line-height: 50rpx; border: 2rpx solid #ccc; border-radius: 20rpx; font-size: 22rpx; } .pI { text-align: center !important; color: #ff8010, ; } .chooseDate .picker { height: 100%; left: 0rpx; box-sizing: border-box; } .chooseDate image { width: 20rpx; height: 20rpx; } .chooseDate .searchBtn { width: 100rpx; height: 50rpx; border-radius: 20rpx; background: #00ba9a; font-size: 24rpx; color: #fff; display: inline-block; text-align: center; line-height: 50rpx; margin-left: 30rpx; vertical-align: top; }
- js:
<script>
//没有写的很规范,只是截取出来的,如果报错注意修改,
data() {
return {
//历史数据表单
historyForm: {
historygwsn: "",
historyPtype: null,
historyPname: "",
historyDevid: "",
historyTagname: "",
historyTagId: [],
startTime: "",
endTime: ""
}
}
},
methods:{
//格式化时间
formatPickerDateTime(dateTimeArray, dateTime) {
let format = dateTimeArray[0][dateTime[0]] + '-' + dateTimeArray[1][dateTime[1]] +
'-' + dateTimeArray[2][dateTime[2]] + " " +
dateTimeArray[3][dateTime[3]] + ':' + dateTimeArray[4][dateTime[4]] + ':' + dateTimeArray[5][dateTime[5]]
return format
},
//获取当前时间
getCurrentTime() {
let nowTime = new Date(),
year = nowTime.getFullYear(),
month = nowTime.getMonth() + 1 >= 10 ? nowTime.getMonth() + 1 : '0' + (nowTime.getMonth() + 1),
day = nowTime.getDate() >= 10 ? nowTime.getDate() : '0' + nowTime.getDate(),
hours = nowTime.getHours() >= 10 ? nowTime.getHours() : '0' + nowTime.getHours(),
minute = nowTime.getMinutes() >= 10 ? nowTime.getMinutes() : '0' + nowTime.getMinutes(),
second = nowTime.getSeconds() >= 10 ? nowTime.getSeconds() : '0' + nowTime.getSeconds();
let currentTime = year + '-' + month + '-' + day + " " + hours + ":" + minute + ":" + second;
let obj = dateTimePicker.dateTimePicker(this.startYear, this.endYear, currentTime);
this.startdateTime = obj.dateTime;
this.enddateTime = obj.dateTime;
this.startdateTimeArray = obj.dateTimeArray;
this.enddateTimeArray = obj.dateTimeArray;
this.alarmstartdateTime = obj.dateTime;
this.alarmenddateTime = obj.dateTime;
this.alarmstartdateTimeArray = obj.dateTimeArray;
this.alarmenddateTimeArray = obj.dateTimeArray;
this.historyForm.startTime = this.formatPickerDateTime(this.startdateTimeArray, this.startdateTime);
this.historyForm.endTime = this.formatPickerDateTime(this.enddateTimeArray, this.enddateTime);
this.alarmForm.startTime = this.formatPickerDateTime(this.alarmstartdateTimeArray, this.alarmstartdateTime);
this.alarmForm.endTime = this.formatPickerDateTime(this.alarmenddateTimeArray, this.alarmenddateTime);
},
//时间选择器
changestartDateTime(e) {
this.startdateTime = e.mp.detail.value;
this.historyForm.startTime = this.formatPickerDateTime(this.startdateTimeArray, this.startdateTime);
},
changeDateTimeColumn(e) {
var arr = this.startdateTime,
dateArr = this.startdateTimeArray;
arr[e.detail.column] = e.detail.value;
dateArr[2] = dateTimePicker.getMonthDay(dateArr[0][arr[0]], dateArr[1][arr[1]]);
this.startdateTimeArray = null;
this.enddateTimeArray = null;
this.alarmstartdateTimeArray = null;
this.alarmenddateTimeArray = null;
this.startdateTimeArray = dateArr;
this.enddateTimeArray = dateArr;
this.alarmstartdateTimeArray = dateArr;
this.alarmenddateTimeArray = dateArr;
},
changeendDateTime(e) {
this.enddateTime = e.mp.detail.value;
this.historyForm.endTime = this.formatPickerDateTime(this.enddateTimeArray, this.enddateTime);
},
//注意这些都是方法,不是粘贴来就不会报错,根据你的场景合理的调取方法,有问题欢迎来评论!
}
</script>
欢迎扫码订阅个人号: