微信小程序选择开始时间和结束时间控件
最近项目中遇到了要在小程序中选择一段时间的功能 由于小程序自带的picker-view 功能不完善 无法自动显示每个月的天数
所在在原来的基础上进行了改进
wxml代码
开始时间：{{startyear}}年{{startmonth}}月{{startday}}日
{{item}}年
{{item}}月
{{item}}日
结束时间：{{endyear}}年{{endmonth}}月{{endday}}日
{{item}}年
{{item}}月
{{item}}日
js代码：
// pages/trajectory/trajectory.js
const date = new Date()
const years = []
const months = []
const days = []
// 获取当前日期的年月日
var currentYear = new Date().getFullYear();
var currentMonth = new Date().getMonth() + 1;
var currentDate = new Date().getDate();
// 当前月份包含的天数
var maxDate = new Date(currentYear, currentMonth, 0).getDate();
// 所有的年份
for (let i = 1990; i <= date.getFullYear(); i++) {
years.push(i)
}
// 所有的月份
for (let i = 1; i <= 12; i++) {
months.push((i + "").padStart(2, '0'))
}
// 当前月份包含的所有天数
for (let i = 1; i <= maxDate; i++) {
days.push((i + "").padStart(2, '0'))
}
Page({
/**
* 页面的初始数据
*/
data: {
// 列表与时间控件的显示与隐藏
listShow: true,
// 时间控件
years: years,
months: months,
days: days,
// 开始日期文字
startyear: '',
startmonth: '',
startday: '',
// 时间控件开始时间
startvalue: [],
// 结束日期文字
endyear: '',
endmonth: '',
endday: '',
// 时间控件结束时间
endvalue: [],
},
// 时间更改
bindChange: function(e) {
const val = e.detail.value;
var newDays = [];
var maxDate = new Date(this.data.years[val[0]], this.data.months[val[1]], 0).getDate();
// 选择月份包含的所有天数
for (let i = 1; i <= maxDate; i++) {
newDays.push((i + "").padStart(2, '0'))
}
// 时间文字内容更改
if (e.target.dataset.type == 'start') { //开始时间
//判断月份是否发生改变---月份改变 对应的当月包含天数改变并且定位到1号
if (this.data.startmonth != this.data.months[val[1]]) {
this.setData({
days: newDays,
startvalue: [val[0], val[1], 0],
startyear: this.data.years[val[0]],
startmonth: this.data.months[val[1]],
startday: days[0]
})
} else {
this.setData({
startyear: this.data.years[val[0]],
startmonth: this.data.months[val[1]],
startday: this.data.days[val[2]]
})
}
} else { //结束时间
//判断月份是否发生改变---月份改变 对应的当月包含天数改变并且定位到1号
console.log(days[0])
if (this.data.endmonth != this.data.months[val[1]]) {
this.setData({
days: newDays,
endvalue: [val[0], val[1], 0],
endyear: this.data.years[val[0]],
endmonth: this.data.months[val[1]],
endday: days[0]
})
} else {
this.setData({
days: newDays,
endyear: this.data.years[val[0]],
endmonth: this.data.months[val[1]],
endday: this.data.days[val[2]]
})
}
}
},
// 提交选择的时间
submitTime: function() {
this.setData({
listShow: true
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function() {
// 获取时间控件---默认的开始时间和结束时间
var defaultYear = years.length - 1;
var defaultMonth = currentMonth;
var defaultDate = currentDate - 1;
this.setData({
// 开始日期文字
startyear: currentYear,
startmonth: currentMonth,
startday: currentDate,
// 时间控件开始时间
startvalue: [defaultYear, defaultMonth, defaultDate],
// 结束日期文字
endyear: currentYear,
endmonth: currentMonth,
endday: currentDate,
// 时间控件结束时间
endvalue: [defaultYear, defaultMonth, defaultDate],
})
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function() {
}
})实现的效果图
按照用户选择的月份可以用 var maxDate = new Date('年份','月份’, 0).getDate(); 获取该月份包含的天数 当用户更改月份 日期显示当月包含的天数并且定位到1号