前言:
在小程序中,往往查詢歷史或者需要時間查詢的情景下,都需要用到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>