先上图。
每次开始默认获取当前选择的日期。
wxml
<view class="beijing">
<view class="second">
<view class="second_1">
<view class="second_1_1">
<button bindtap="begin" type="primary">点击重选</button>
</view>
<view class="second_1_2">
<text>当前开始日期：</text>
<text style="font-weight: bold;">{{year_0}}年{{month_0}}月{{day_0}}日</text>
</view>
</view>
<view class="second_1">
<view class="second_1_1">
<button bindtap="end" type="primary">点击重选</button>
</view>
<view class="second_1_2">
<text>当前终止日期：</text>
<text style="font-weight: bold;">{{year_1}}年{{month_1}}月{{day_1}}日</text>
</view>
</view>
</view>
</view>
<!-- 日期选择器 -->
<view wx:if="{{isShowDates}}" class="showDates">
<modal show="true" height='60%;width:100%' bindconfirm='day0_1' no-cancel="true">
<view class="time_text">{{year}}-{{month}}-{{day}}</view>
<view class="time_title">
<view class="time_title_text">年</view>
<view class="time_title_text">月</view>
<view class="time_title_text">日</view>
</view>
<picker-view wx:if="{{years.length>0 && months.length>0 && days.length>0}}" indicator-style="height: 50px;" class="view_picker" style="width: 100%;" value="{{value}}" bindchange="bindChange" >
<!-- <text>{{years}}</text>
<text>{{months}}</text>
<text>{{days}}</text> -->
<picker-view-column class="view_picker_column">
<view wx:for="{{years}}" class="view_picker_text" wx:key="{{index}}">{{item}}</view>
</picker-view-column>
<picker-view-column class="view_picker_column">
<view wx:for="{{months}}" class="view_picker_text" wx:key="{{index}}">{{item}}</view>
</picker-view-column>
<picker-view-column class="view_picker_column">
<view wx:for="{{days}}" class="view_picker_text" wx:key="{{index}}">{{item}}</view>
</picker-view-column>
</picker-view>
</modal>
</view>
js
const date = new Date()
const nowYear = date.getFullYear()
const nowMonth = date.getMonth() + 1
const nowDay = date.getDate()
let daysInMonth = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
// 根据年月获取当月的总天数
let getDays = function (year, month) {
if (month === 2) {
return ((year % 4 === 0) && ((year % 100) !== 0)) || (year % 400 === 0) ? 29 : 28
} else {
return daysInMonth[month - 1]
}
}
// 根据年月日设置当前月有多少天 并更新年月日数组
let setDate = function (year, month, day, _this) {
let daysNum = year === nowYear && month === nowMonth ? nowDay : getDays(year, month)
day = day > daysNum ? 1 : day
let monthsNum = year === nowYear ? nowMonth : 12
let years = []
let months = []
let days = []
let yearIndex = 9999
let monthIndex = 0
let dayIndex = 0
// 重新设置年份列表
for (let i = 1990; i <= nowYear; i++) {
years.push(i)
}
years.map((v, idx) => {
if (v === year) {
yearIndex = idx
}
})
// 重新设置月份列表
for (let i = 1; i <= monthsNum; i++) {
var k = i;
months.push(k)
}
months.map((v, idx) => {
if (v === month) {
monthIndex = idx
}
})
// 重新设置日期列表
for (let i = 1; i <= daysNum; i++) {
var k = i;
days.push(k)
}
days.map((v, idx) => {
if (v === day) {
dayIndex = idx
}
})
_this.setData({
//时间列表参数
years: years,
months: months,
days: days,
//选中的日期
year: year,
month: month,
day: day,
value: [yearIndex, monthIndex, dayIndex],
})
}
Page({
data: {
//时间列表参数
flag: false,
years: [],
months: [],
days: [],
//选中的日期
year: nowYear,
month: nowMonth,
day: nowDay,
//默认开始日期
year_0: nowYear,
month_0: nowMonth,
day_0: nowDay,
//默认终止日期
year_1: nowYear,
month_1: nowMonth,
day_1: nowDay,
value: [9999, 1, 1],
isShowDates:false,
flag1:0 //用于标记是起始日期与终止日期，1表示起始，2表示终止
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
setDate(this.data.year, this.data.month, this.data.day, this);
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
,
bindChange: function (e) {
let val = e.detail.value
setDate(this.data.years[val[0]], this.data.months[val[1]], this.data.days[val[2]], this)
}
,
begin(){
this.setData({
isShowDates:true,
flag1:1
})
},
end() {
this.setData({
isShowDates: true,
flag1: 2
})
},
day0_1(){
if(this.data.flag1==1){
//更新开始日期
this.setData({
year_0: this.data.year,
month_0: this.data.month,
day_0: this.data.day
})
console.log("当前选择的开始日期：", this.data.year_0, "-", this.data.month_0, "-", this.data.day_0)
}
else if (this.data.flag1==2){
//更新终止日期
this.setData({
year_1: this.data.year,
month_1: this.data.month,
day_1: this.data.day
})
console.log("当前选择的终止日期：", this.data.year_1, "-", this.data.month_1, "-", this.data.day_1)
}
console.log("点击了确定！")
this.setData({
isShowDates: false
})
}
})
wxss
/* pages/xiaoyuanka/myMoneyMoneyHistory/myMoneyMoneyHistory.wxss */
.time_text{
text-align: center;
}
.showDates{
position: fixed;
width: 80%;
height: 80%;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
font-size: 36rpx;
z-index: 9999;
}
.time_title{
display: flex;
flex-direction: row;
justify-content: space-around;
}
.view_picker{
height: 300rpx;
}
.view_picker_text{
color: #000;
font-size: 40rpx;
text-align: center;
line-height: 100rpx;
}
.second{
height: 250rpx;
width: 100%;
display: flex;
flex-direction:column;
justify-content: space-evenly;
align-content: space-evenly;
align-items: center;
/* border: 2rpx solid black; */
/* margin-top: 10rpx; */
}
.second_1{
height: 100rpx;
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-evenly;
/* border: 2rpx solid red; */
}
.second_1_1{
height: 100rpx;
width: 200rpx;
/* border: 2rpx solid black; */
line-height: 100rpx; /*行间距*/
font-weight: bold;
}
.second_1_2{
height: 100rpx;
width: 500rpx;
/* border: 2rpx solid black; */
line-height: 100rpx; /*行间距*/
/* text-decoration: underline; */
}
.beijing{
background-image: url("https://726f-robot-448af6-1258473156.tcb.qcloud.la/%E6%A0%A1%E5%9B%AD%E5%8D%A1%E4%B8%AA%E4%BA%BA%E4%BD%99%E9%A2%9D%E8%83%8C%E6%99%AF.png?sign=eca13a0ce14e07e1681d90fcc92a67f5&t=1583836518");
height: 100vh;
}
有一个小bug，就是当你选择完开始日期后，再去选择终止日期哪里，默认的日期就是开始日期，这里我没改 如果读者想改随意，不影响最终功能。
