鏁堟灉鍥?/div>
鏄矖绯欎簡涓€浜涘椃涓嶈繃瀹炵幇鍔熻兘姣旇緝閲嶈鍢縹
棣栧厛锛屽湪鏍圭洰褰曚笅鏂板缓涓€涓枃浠跺す锛屼笓闂ㄦ斁缃粍浠跺唴瀹广€傝鏂囦欢澶逛笅鍐嶆柊寤烘枃浠跺す锛屾斁缃垜浠啓濂界殑鏃堕棿鎼滅储鐨勫唴瀹广€?/p>
鏂囦欢浣嶇疆
缁勪欢鍐呭娑夊強鍒皃icker鐨勪娇鐢紝鐢ㄥ井淇″皬绋嬪簭鑷甫鐨勪篃鍙互锛寁ant缁勪欢搴撻噷涔熷彲浠ャ€備笉杩囦釜浜烘劅瑙夊皬绋嬪簭鑷甫鐨勬瘮杈冨ソ鐢紝鐩存帴鎿嶄綔灏辫锛屼笉鐢ㄦ搷浣滃儚vant缁勪欢搴撻噷閭ｄ箞澶氱殑鏂规硶銆傘€傜偣鍑诲睍寮€picker锛岄€夋嫨鏃堕棿锛岀‘璁ゆ椂闂淬€傘€傚氨寰堢儲鍝堝搱鍝堝搱鍝堝搱
timeFilter.wxml鏂囦欢鍐呭锛氾紙startTime涓鸿捣濮嬫棩鏈燂紝endTime涓虹粨鏉熸棩鏈熴€俻icker鍐呯殑鎴嚦鏃ユ湡end榛樿涓哄綋鍓嶆棩鏈熴€傦級
<view class="search_round">
<view class="time">
<picker mode="date" value="{{startTime}}" start="2000-01-01" end="{{currentDate}}" bindchange="bindDateChange" data-msg="start">
<view class="start">
{{ startTime }}
</view>
</picker>
<view class="line">鈥斺€?lt;/view>
<picker mode="date" value="{{endTime}}" start="2000-01-01" end="{{currentDate}}" bindchange="bindDateChange" data-msg="end">
<view class="end">
{{ endTime }}
</view>
</picker>
</view>
<view class="search" bindtap="_handleFilter">
<van-icon name="search" size="24" color="lightgrey" />
</view>
</view>
timeFilter.wxss鏂囦欢鍐呭锛?/p>
.search_round{
box-sizing: border-box;
width: 100%;
margin-bottom: 0;
border-radius: 50px;
background: #fff;
font-size: 26rpx;
display: flex;
align-items: center;
justify-content: space-between;
padding: 4rpx;
padding-left: 20rpx;
}
.search_round .time {
color: #868383;
flex: 7;
display: flex;
align-items: center;
justify-content: space-around;
}
.search_round .search {
flex: 1;
margin-left: 20rpx;
margin-top: 10rpx;
}
timeFilter.json鏂囦欢鍐呭锛?/p>
{
"component": true,
"usingComponents": {
"van-icon": "@vant/weapp/icon/index"
}
}
timeFilter.js鏂囦欢鍐呭锛?/p>
// pages/common/timeFilter.js
Component({
lifetimes: {
// 缁勪欢鐨勭敓鍛藉懆鏈熷嚱鏁般€傝繘鍏ラ〉闈㈠嵆鑾峰彇褰撳墠鏃ユ湡
attached: function () {
this.getTime();
}
},
/**
* 缁勪欢鐨勫睘鎬у垪琛細鍦ㄧ埗缁勪欢涓彲鑳戒細杩涜鎿嶄綔鐨勫彉閲忚缃湪properties閲?
*/
properties: {
startTime: {
type: String,
value: ""
},
endTime: {
type: String,
value: ""
},
},
/**
* 缁勪欢鐨勫垵濮嬫暟鎹細鐖剁粍浠朵腑涓嶄細鍙戠敓鏀瑰彉鐨勫彉閲忚缃湪data閲?
*/
data: {
timeType: "",
currentDate: ""
},
/**
* 缁勪欢鐨勬柟娉曞垪琛?
*/
methods: {
getTime() {
// 鑾峰彇褰撳墠鏃ユ湡
let date = new Date();
// 鏍煎紡鍖栧綋鍓嶆棩鏈?
let year = date.getFullYear();
let agoMonth = date.getMonth();
let month = date.getMonth() + 1;
let day = date.getDate();
// 琛ラ浂鍎?
agoMonth = agoMonth <= 9 `0${agoMonth}` : agoMonth;
month = month <= 9 `0${month}` : month;
day = day <= 9 `0${day}` : day;
let endTime = `${year}-${month}-${day}`;
let startTime = `${year}-${agoMonth}-${day}`;
// 璧嬪€?
this.setData({
endTime,
startTime,
currentDate: endTime
})
},
bindDateChange(e) {
// 鍙栧€?
let value = e.detail.value;
// 涓や釜鏃ユ湡鐢ㄤ簡鍚屼竴涓柟娉曪紝鎵€浠ュ彟澶栬缃竴涓弬鏁版潵鍋氬尯鍒?
let timeType = e.currentTarget.dataset.msg;
// 璧峰鏃ユ湡璧嬪€?
if (timeType == 'start') {
this.setData({
startTime: value
})
}
// 缁撴潫鏃ユ湡璧嬪€?
if (timeType == "end") {
this.setData({
endTime: value
})
}
},
// 鐐瑰嚮鎼滅储鍥捐〃杩涜鐨勬搷浣?
_handleFilter() {
let startTime = new Date(this.data.startTime).getTime();
let endTime = new Date(this.data.endTime).getTime();
// 璧峰鏃ユ湡涓嶈兘瓒呰繃缁撴潫鏃ユ湡鐨勬嫤鎴?
if (startTime > endTime) {
wx.showToast({
title: "璇烽€夋嫨姝ｇ‘鏃堕棿鍖洪棿",
icon: "none",
duration: 2000
})
return;
}
// 杩欎釜鎴戣彍楦¤涓嶆竻妤氥€傘€傘€傘€傚畼鏂规枃妗ｉ噷鏈夎В閲娿€傘€傝繕鍙互杩涜鏇村璁剧疆銆傘€傚凹钀岃嚜宸卞幓鐪嬪搱鍝堝搱鍝?
this.triggerEvent("handleFilter");
}
}
})
缁勪欢鍐呭灏辨槸杩欎簺馃憜锛屼互涓嬫槸鐖剁粍浠朵腑鐨勮缃€?br> 鐖剁粍浠?json閰嶇疆锛氣啌
{
"usingComponents": {
"time-filter": "../../../components/timeFilter/timeFilter"
},
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "black",
"navigationBarTitleText": "鏃堕棿妫€绱?,
"backgroundColor": "#eeeeee",
"backgroundTextStyle": "light"
}
鐖剁粍浠?wxml锛氾紙鏈€濂藉湪寮曞叆鐨則imeFilter澶栭潰鍐嶅涓鍣紝灏嗘潵鍦ㄧ埗缁勪欢涓柟渚胯缃牱寮忥級
<view class="time-container">
<time-filter id="filter" startTime="{{startTime}}" endTime="{{endTime}}" bind:handleFilter="_handleFilter"></time-filter>
</view>
鐖剁粍浠朵腑鐨勬牱寮忓氨涓嶄笂浜嗭紝鍙湪time-container璁剧疆浜嗕竴涓搴︼紝鍜屽眳涓瓇
鐖剁粍浠?js涓渶瑕佽繘琛屼笁涓搷浣溿€?br> 1.锛堥渶瑕佷负璧峰鏃ユ湡鍜岀粨鏉熸棩鏈熸彁鍓嶈祴鍊肩殑璇濇墠杩涜杩欎竴姝ワ級鍦╠ata涓缃彉閲忥紝涓庡瓙缁勪欢鍙岃姳鎷彿鍐呯殑鍚嶇О涓€鑷?/p>
Page({
data {
startTime: "",
endTime:""
}
})
2.鐢熷懡鍛ㄦ湡鍑芥暟onShow涓?鈫擄紙杩欓噷鐨刬d闇€瑕佸拰涓婇潰鐨刬d瀵瑰簲锛?/p>
onShow() {
this.timeFilter = this.selectComponent('#filter');
},
3.瀛愮粍浠跺唴鐨勬柟娉曚娇鐢ㄢ啌
_handleFilter() {
// 杩欓噷锛屽疄涓嶇浉鐬掞紝璇ュ共鍢涘氨骞插槢浜嗗搱鍝堝搱闇€瑕佷紶鍊肩殑浼犲€硷紝璋冩帴鍙ｇ殑璋冩帴鍙?
// 闇€瑕佸彇鍊肩殑璇硶
let start = this.timeFilter.data.startTime;
let end = this.timeFilter.data.endTime;
console.log(start,"start");
console.log(end,"end");
},