效果图
代码
xml
<view class="date_bg_view">
</view>
<view class="date_content">
<view class="date_title">
<van-icon name="cross" class="close" size="20px" color="#999999" bindtap="onClose"/>
<text class="date_title_txt">选择时间</text>
</view>
<view class="line"></view>
<!-- 快速选择 -->
<view class="date_quick_choose">
<text class="date_quick_txt">快速选择</text>
<view class="date_quick_show">
<view class="quick_cell_flag" wx:for="{{dateList}}" wx:key="id" bindtap="handleQuickChoose" data-item="{{item}}" wx:if="{{item.flag}}">
{{item.value}}
</view>
<view class="quick_cell" wx:for="{{dateList}}" wx:key="id" bindtap="handleQuickChoose" data-item="{{item}}" wx:if="{{!item.flag}}">
{{item.value}}
</view>
</view>
</view>
<!-- 自定义时间 -->
<view class="date_quick_choose">
<text class="date_quick_txt">自定义时间</text>
<view class="date_picker">
<picker mode="date" value="{{startDate}}" start="2015-09-01" end="2999-12-31" bindchange="bindDateChange" data-type="1" mask-style=" color='#0A3E79'">
<view class="picker">
{{startDate?startDate:'开始时间'}}
</view>
</picker>
<text style="width: 20rpx;height: 1rpx;background-color: #999999;"></text>
<picker mode="date" value="{{endDate}}" start="2015-09-01" end="2999-12-31" bindchange="bindDateChange" data-type="2">
<view class="picker">
{{endDate?endDate:'结束时间'}}
</view>
</picker>
</view>
</view>
<button class="sure_btn" bindtap="handleSure"> 确定 </button>
</view>
wxss
.date_bg_view{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000000;
opacity: 0.3;
z-index: 10;
}
.date_content{
border-top-left-radius: 20rpx;
border-top-right-radius: 20rpx;
background-color: #ffffff;
height: 65%;
bottom: 0;
position: fixed;
left: 0;
width: 100%;
z-index: 11;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
}
.date_title{
z-index: 11;
width: 100%;
display: flex;
justify-content: flex-start;
align-items: center;
height: 90rpx;
}
.close{
width: 10%;
margin: 10rpx;
}
.date_title_txt{
margin-left: 30%;
align-self: center;
font-size: 35rpx;
font-weight: bold;
font-family: SourceHanSansCN-Medium;
}
.line{
width: 100%;
margin: 10rpx;
height: 1rpx;
background-color: #EEEEEE;
}
.date_quick_choose{
z-index: 11;
width: 100%;
padding: 20rpx;
}
.date_quick_txt{
font-family: SourceHanSansCN-Medium;
margin: 20rpx;
font-size: 30rpx;
color: #666666;
z-index: 12;
}
.date_quick_show{
width: 100%;
flex-wrap: wrap;
display: flex;
justify-content: flex-start;
flex-direction: row;
align-items: center;
z-index: 12;
}
.quick_cell{
padding: 5rpx;
width: 29%;
margin: 2%;
font-size: 30rpx;
text-align: center;
z-index: 12;
height: 60rpx;
background-color: #F7F7F7;
color: #999999;
border-radius: 10rpx;
font-family: SourceHanSansCN-Medium;
border: 1rpx solid #999999;
}
.quick_cell_flag{
padding: 5rpx;
width: 29%;
margin: 2%;
font-size: 30rpx;
text-align: center;
z-index: 12;
height: 60rpx;
background-color: #FFFFFF;
color: #0A3E79;
border-radius: 10rpx;
font-family: SourceHanSansCN-Medium;
border: 1rpx solid #0A3E79;
}
.date_picker{
display: flex;
width: 80%;
margin-left: 10%;
justify-content: space-between;
align-items: center;
margin-top: 30rpx;
}
.picker{
font-size: 30rpx;
border: 1rpx solid #0A3E79;
padding: 10rpx 40rpx;
background-color: #FFFFFF;
color: #0A3E79;
font-weight: bold;
}
.sure_btn{
background-color: #0A3E79;
color: #ffffff;
font-size: 105%;
width: 90%;
margin-top: 90rpx;
text-align: center;
height: 80rpx;
}
js
import { formatDate,getTimeLastWeek,getTimeLastMonth,getTimeThreeMonth,getTimeHalfYear } from "../../utils/util";
const app = getApp();
Component({
/**
* 组件的属性列表
*/
properties: {
},
/**
* 组件的初始数据
*/
data: {
dateList: [{
id: 1,
value: '当天',
flag: false
},
{
id: 2,
value: '近七天',
flag: false
},
{
id: 3,
value: '近一个月',
flag: false
},
{
id: 4,
value: '近三个月',
flag: false
},
{
id: 5,
value: '近半年',
flag: false
}
],
startDate: '',
endDate: '',
currentTime:formatDate(new Date()),
},
/**
* 组件的方法列表
*/
methods: {
/**
* 快速选择
* @param {*} e
*/
handleQuickChoose(e) {
let that = this;
let item1 = e.currentTarget.dataset.item;
that.data.dateList.forEach(item => {
if (item.id === item1.id) {
item.flag = true;
} else {
item.flag = false;
}
})
that.setData({
dateList: that.data.dateList
})
switch (item1.id) {
case 1: //当天
console.log(1,that.data.currentTime);
that.setData({
startDate:that.data.currentTime,
endDate:that.data.currentTime
})
break;
case 2: //近七天
console.log(2);
that.setData({
startDate:getTimeLastWeek(new Date()),
endDate:that.data.currentTime
})
break;
case 3: //近一个月
console.log(3);
that.setData({
startDate:getTimeLastMonth(new Date()),
endDate:that.data.currentTime
})
break;
case 4: //近三个月
console.log(4);
that.setData({
startDate:getTimeThreeMonth(new Date()),
endDate:that.data.currentTime
})
break;
case 5: //近半年
console.log(5);
that.setData({
startDate:getTimeHalfYear(new Date()),
endDate:that.data.currentTime
})
break;
}
console.log(that.data.dateList);
// console.log(e);
},
/**
* 选择时间
*/
bindDateChange(e) {
console.log('picker发送选择改变,携带值为', e)
let that = this;
let type = e.currentTarget.dataset.type
if (type == 1) {
that.setData({
startDate: e.detail.value
})
} else {
that.setData({
endDate: e.detail.value
})
}
},
/**
* 顶部关闭按钮
*/
onClose() {
this.triggerEvent('sync', {
show: false
})
},
/**
* 确定
*/
handleSure() {
let that = this;
if(!that.data.startDate){
app.myShowToast('开始时间不能为空');
return false;
}
if(!that.data.endDate){
app.myShowToast('结束时间不能为空');
return false;
}
if(that.data.startDate <= that.data.endDate){
that.triggerEvent('sync', {
show: false,
startDate: that.data.startDate,
endDate: that.data.endDate
})
}else{
app.myShowToast('结束时间不能小于开始时间');
return false;
}
}
},
})
工具类 不一定运算正确,有更好的可以继续实验 三个月 以及半年还未测试多种突发情况
const formatTime = date => {
const year = date.getFullYear()
const month = date.getMonth() + 1
const day = date.getDate()
const hour = date.getHours()
const minute = date.getMinutes()
const second = date.getSeconds()
return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
}
/**
* 当天
* @param {*} date
*/
const formatDate = date => {
const year = date.getFullYear()
const month = date.getMonth() + 1
const day = date.getDate()
return [year, month, day].map(formatNumber).join('-')
}
/**
* 时间戳转化为年 月 日 时 分 秒
* number: 传入时间戳
* format:返回格式,支持自定义,但参数必须与formateArr里保持一致
*/
function formatTimeTwo(number, format) {
var formateArr = ['Y', 'M', 'D', 'h', 'm', 's'];
var returnArr = [];
var date = new Date(number * 1000);
returnArr.push(date.getFullYear());
returnArr.push(formatNumber(date.getMonth() + 1));
returnArr.push(formatNumber(date.getDate()));
returnArr.push(formatNumber(date.getHours()));
returnArr.push(formatNumber(date.getMinutes()));
returnArr.push(formatNumber(date.getSeconds()));
for (var i in returnArr) {
format = format.replace(formateArr[i], returnArr[i]);
}
return format;
}
/**
* 近七天
* @param {*} last
*/
const getTimeLastWeek = last => {
const year = last.getFullYear()
const day = last.getDate()
const ti = day - 7
// 判断是否月初
if (ti <= 0) {
const month = last.getMonth() + 1 - 1
const d = new Date(year, month, 0)
const dayBig = d.getDate() //获取当月的所有天数
const ti1 = dayBig + ti
return [year, month, ti1].map(formatNumber).join('-')
} else {
const month = last.getMonth() + 1
return [year, month, ti].map(formatNumber).join('-')
}
// return [year, month, day].map(formatNumber).join('-')
}
/**
* 近1个月
* @param {*} last
*/
const getTimeLastMonth = last => {
const year = last.getFullYear()
const day = last.getDate()
const ti = day - 30
// 判断是否月初
if (ti <= 0) {
const month = last.getMonth() + 1 - 1
const d = new Date(year, month, 0)
const dayBig = d.getDate() //获取当月的所有天数
const ti1 = dayBig + ti
return [year, month, ti1].map(formatNumber).join('-')
} else {
const month = last.getMonth() + 1
return [year, month, ti].map(formatNumber).join('-')
}
}
/**
* 近3个月
* @param {*} last
*/
const getTimeThreeMonth = last => {
const year = last.getFullYear()
const month = last.getMonth() + 1
const day = last.getDate()
// 判断三个月的开始月份
const startMonth = month - 3;
// 判断是否是年初
if(startMonth <= 0){
year = year - 1 ;
}
return [year, startMonth, day].map(formatNumber).join('-')
}
/**
* 近3个月
* @param {*} last
*/
const getTimeHalfYear = last => {
const year = last.getFullYear()
const month = last.getMonth() + 1
const day = last.getDate()
// 判断三个月的开始月份
const startMonth = month - 6;
// 判断是否是年初
if(startMonth <= 0){
year = year - 1 ;
}
return [year, startMonth, day].map(formatNumber).join('-')
}
/**
* 赋0
* @param {*} n
*/
const formatNumber = n => {
n = n.toString()
return n[1] ? n : `0${n}`
}
module.exports = {
formatTime: formatTime,
formatDate:formatDate,
formatTimeTwo: formatTimeTwo,
getTimeLastWeek:getTimeLastWeek,
getTimeLastMonth:getTimeLastMonth,
getTimeThreeMonth:getTimeThreeMonth,
getTimeHalfYear:getTimeHalfYear
}
父视图
引入组件
## 引入
"datePicker":"../../../components/datePicker/index"
应用
<!-- 时间选择组件 bind:sync 子类回传数据的方法-->
<datePicker wx:if="{{show}}" bind:sync="syncGetDate"></datePicker>
js
syncGetDate(e){
let that = this;
let show = e.detail.show;
if(!show){ // 子组件点击了关闭 关闭弹窗
that.setData({
show:false
})
}
console.log("子组件:",e);
// that.getPurchaseList();
}