微信小程序选择开始时间和结束时间控件

最近项目中遇到了要在小程序中选择一段时间的功能由于小程序自带的picker-view 功能不完善无法自动显示每个月的天数

所在在原来的基础上进行了改进

wxml代码

  <view class="time"><view class="time_text"><view>开始时间：{{startyear}}年{{startmonth}}月{{startday}}日</view></view><view class="item_time"><picker-view indicator-class="picker_active" mask-class="mask" value="{{startvalue}}" data-type="start" bindchange="bindChange"><picker-view-column><view wx:for="{{years}}" wx:key="{{index}}">{{item}}年</view></picker-view-column><picker-view-column><view wx:for="{{months}}" wx:key="{{index}}" bindchange="monthChange">{{item}}月</view></picker-view-column><picker-view-column><view wx:for="{{days}}" wx:key="{{index}}">{{item}}日</view></picker-view-column></picker-view></view><view class="time_text"><view>结束时间：{{endyear}}年{{endmonth}}月{{endday}}日</view></view><view class="item_time"><picker-view indicator-class="picker_active" mask-class="mask" value="{{endvalue}}" data-type="end" bindchange="bindChange"><picker-view-column><view wx:for="{{years}}" wx:key="{{index}}">{{item}}年</view></picker-view-column><picker-view-column><view wx:for="{{months}}" wx:key="{{index}}">{{item}}月</view></picker-view-column><picker-view-column><view wx:for="{{days}}" wx:key="{{index}}">{{item}}日</view></picker-view-column></picker-view></view></view>

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号

微信小程序选择开始时间和结束时间控件相关推荐

微信小程序控制盒子显示隐藏_微信小程序动态的显示或隐藏控件的方法(两种方法)...
在微信小程序开发时,经常要用到一个控件会根据不同的情况和环境动态显示与隐藏这种情况,下面就来实践一把!上效果先它的实现方法有两种, 第一种方法:单选法,就是隐藏与显示根据条件二选一,代码如下: 我是 ...
微信小程序动态的显示或隐藏控件
在微信小程序开发时,经常要用到一个控件会根据不同的情况和环境动态显示与隐藏这种情况,下面就来实践一把!上效果先它的实现方法有两种, 第一种方法:单选法,就是隐藏与显示根据条件二选一,代码如下: &l ...
微信小程序-如何获取用户表单控件中的值
虽互不曾谋面,但希望能和您成为笔尖下的朋友以读书,技术,生活为主,偶尔撒点鸡汤不作,不敷衍,意在真诚吐露,用心分享点击左上方,可关注本刊标星公众号(ID:itclanCoder) 如果不知道如 ...
基于微信小程序实现番茄钟专注时间项目演示【附项目源码+论文说明】
基于微信小程序实现番茄钟专注时间项目演示摘要时间管理是指事先计划和运用一定的技能.方法和事物,以敏感.有效地利用时间完成既定的个人或安排的过程.其中番茄法则是一种先进的时间管理理论与方法,正受到越 ...
开发一个微信小程序/APP一般需要多少时间，多少钱？
开发一个微信小程序/APP一般需要多少时间,多少钱? 微信小程序/APP开发的工期和费用估算需视功能需求的多少和难易程度而定,需求不明的情况下很难给出恰当评估. 在湃点网络定制平台,一对一的专业的顾问 ...
微信小程序选择视频，获取封面缩略图
使用微信小程序选择视频,且获取其封面使用微信小程序选择视频上传,且获取其封面背景名词参考效果图展示结束: 使用微信小程序选择视频上传,且获取其封面背景又一活儿,要从小程序里选择视频,上 ...
基于微信小程序实现番茄钟专注时间项目演示【附项目源码+论文说明】分享
基于微信小程序实现番茄钟专注时间项目演示摘要时间管理是指事先计划和运用一定的技能.方法和事物,以敏感.有效地利用时间完成既定的个人或安排的过程.其中番茄法则是一种先进的时间管理理论与方法,正受到越 ...
微信小程序选择框问题小程序picker点击显示object range-key=这里写要显示的字段
微信小程序选择框问题小程序picker点击显示object range-key="这里写要显示的字段" <picker bindchange="bindClass ...
微信小程序获取系统日期和时间 —— 微信小程序教程系列（17）
获取当前系统日期和时间在小程序中,新建项目时,就会有一个utils.js文件,就是获取日期和时间的,代码如下: utils.js: function formatTime(date) {var ye ...
微信小程序选择和上传图片
文章目录微信小程序选择和上传图片微信小程序选择和上传图片选择和上传图片用到的api: wx.chooseImage() 和 wx.uploadFile() 具体实现代码如下: wx.choose ...

微信小程序选择开始时间和结束时间控件

微信小程序选择开始时间和结束时间控件相关推荐

最新文章

热门文章