前言:借鉴一些大佬的代码 整合一下完成的。
1.新建一个getdateTime.js文件 封装一些函数。(当前时间函数 和 获取昨天明天函数)
/**
* @param {String} str (y-m-d h:i:s) y:年 m:月 d:日 h:时 i:分 s:秒
*/
function dateTimeStr(str){
var date = new Date(),
year = date.getFullYear(), //年
month = date.getMonth() + 1, //月
day = date.getDate(), //日
hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours(), //时
minute = date.getMinutes() < 10 ? date.getMinutes() : date.getMinutes(), //分
second = date.getSeconds() < 10 ? date.getSeconds() : date.getSeconds(); //秒
month >= 1 && month <= 9 ? (month = "0" + month) : "";
day >= 0 && day <= 9 ? (day = "0" + day) : "";
hour >= 0 && hour <= 9 ? hour : "";
minute >= 0 && minute <= 9 ? (minute = "0" + minute) : "";
second >= 0 && second <= 9 ? (second = "0" + second) : "";
if(str.indexOf('y') != -1){
str = str.replace('y', year)
}
if(str.indexOf('m') != -1){
str = str.replace('m', month)
}
if(str.indexOf('d') != -1){
str = str.replace('d', day)
}
if(str.indexOf('h') != -1){
str = str.replace('h', hour)
}
if(str.indexOf('i') != -1){
str = str.replace('i', minute)
}
if(str.indexOf('s') != -1){
str = str.replace('s', second)
}
return str;
}
//获取日期的今天,明天,后天 -1是昨天,0是今天,1是后一天
function getDateStr(today, addDayCount) {
let date;
if (today) {
date = new Date(today);
} else {
date = new Date();
}
date.setDate(date.getDate() + addDayCount); //获取AddDayCount天后的日期
let y = date.getFullYear();
let m = date.getMonth() + 1; //获取当前月份的日期
let d = date.getDate();
if (m < 10) {
m = '0' + m;
};
if (d < 10) {
d = '0' + d;
};
console.log(y + "-" + m + "-" + d)
return y + "-" + m + "-" + d;
}
module.exports = {
dateTimeStr: dateTimeStr,
getDateStr:getDateStr
}
2.在所用页面引用上:
import getDateTime from '@/config/getdateTime.js';
export default {
onLoad(options) {
this.start_time = getDateTime.getDateStr(null, -1); //昨天
this.end_time = getDateTime.dateTimeStr('y-m-d'); //今天
},
},
<view class="display widP100">
<picker class="widP47" mode="date" :value="start_time" @change="bindPickerChange($event,1)">
<view class="paddingA20 boxSize boRadius60 display bgColorF6F7FB">
<text class="iconfont icon-tubiao_riqi iconSize20">text>
<view class="fontSize14 marL20">
{{start_time}}
view>
<text class="iconfont icon-arrow-right-copy-copy iconSize14 marL20">text>
view>
picker>
<picker class="widP47 marL40" mode="date" :value="end_time" @change="bindPickerChange($event,2)">
<view class="paddingA20 boxSize boRadius60 display bgColorF6F7FB">
<text class="iconfont icon-tubiao_riqi iconSize20">text>
<view class="fontSize14 marL20">
{{end_time}}
view>
<text class="iconfont icon-arrow-right-copy-copy iconSize14 marL20">text>
view>
picker>
view>
import getDateTime from '@/config/getdateTime.js';
export default {
data() {
return {
start_time: '', //起始日期
end_time: '', //终止日期 };
},
onLoad(options) {
this.start_time = getDateTime.getDateStr(null, -1); //昨天
this.end_time = getDateTime.dateTimeStr('y-m-d'); //今天
},
methods: {
// 选择日期
bindPickerChange(e, tag) {
let val = e.detail.value;
if (tag == 1) { //开始时间
if (val > this.end_time) return this.$alert('开始日期不能大于结束日期!')
this.start_time = val;
} else { //结束时间
if (val < this.start_time) return this.$alert('结束日期不能小于开始日期!')
this.end_time = val;
}
},
}
};
<view class="display martb">
<picker class="widP47" mode="date" value="{{start_time}}" data-tag="1" bindchange="bindPickerChange">
<view class="paddingA20 display">
<image class="imgz" src="/static/images/icon/wait-128.png" mode="aspectFill"> image>
<view class="fontSize14">
{{start_time}}
view>
<image class="imgz1" src="/static/images/right.png" mode="aspectFill">image>
view>
picker>
<picker class="widP47 marL40" mode="date" value="{{end_time}}" data-tag="2" bindchange="bindPickerChange">
<view class="paddingA20 display">
<image class="imgz" src="/static/images/icon/wait-128.png" mode="aspectFill"> image>
<view class="fontSize14 ">
{{end_time}}
view>
<image class="imgz1" src="/static/images/right.png" mode="aspectFill">image>
view>
picker>
view>
import getDateTime from "../../utils/getdateTime.js";
Page({
data: {
start_time: '', //起始日期
end_time: '', //终止日期
},
onLoad(){
this.setData({
start_time: getDateTime.getDateStr(null, -1), //昨天
end_time: getDateTime.dateTimeStr('y-m-d'), //今天
})
},
// 选择日期
bindPickerChange(e) {
let val = e.detail.value;
let tag = e.currentTarget.dataset.tag;
if (tag == 1) { //开始时间
if (val > this.data.end_time) return wx.showToast({
title: '开始日期不能大于结束日期!',
icon: 'none'
})
this.setData({
start_time: val
})
} else { //结束时间
if (val < this.data.start_time) return wx.showToast({
title: '结束日期不能小于开始日期!',
icon: 'none'
})
this.setData({
end_time: val
})
}
},
})
.display{
width: 100%;
display: flex;
}
.widP47{
width: 47%;
}
.paddingA20{
padding: 20rpx;
box-sizing: border-box;
border-radius: 24rpx;
border: 1px solid #eee;
}
.imgz{
width: 50rpx;
height: 50rpx;
}
.fontSize14{
font-size: 28rpx;
line-height: 50rpx;
margin-left: 20rpx;
}
.imgz1{
width: 30rpx;
height: 30rpx;
transform: rotate(90deg);
margin-left: 20rpx;
margin-top: 6rpx;
}
.marL40{
margin-left: 40rpx;
}
.martb{
margin-bottom: 40rpx;
}