微信小程序picker日期-时间段选择

mac2026-04-14  2

--------今天休息跟大家分享一下在开发小程序遇到的时间选择这块的代码;当前时间的格式为:月+日+点+分+点+分 --------代码复制即可用,也可以直接下载git上的demo运行就可以了~git地址:https://github.com/hjqit/Wechat-demo-picker --------Emmmm、代码易懂,有需要的小伙伴看看就知道了;


图1:设计图 图2:demo效果图


上代码中…

.wxml文件

<view> <view>{{month}}{{day}}{{hour}}点:{{minute}}分~{{hours_}}点:{{minutes_}}</view> <view style="border:1px solid red;position: fixed;width: 100%;bottom: 0;"> <picker-view indicator-style="height: 50px;" style="width: 100%; height: 300px;text-align: center;" value="{{value}}" bindchange="bindChange"> <picker-view-column style="display:none;"> <view wx:for="{{years}}" wx:key style="line-height: 50px;display:none;">{{item}}</view> </picker-view-column> <picker-view-column> <view wx:for="{{months}}" wx:key style="line-height: 50px">{{item}}</view> </picker-view-column> <picker-view-column> <view wx:for="{{days}}" wx:key style="line-height: 50px">{{item}}</view> </picker-view-column> <picker-view-column> <view wx:for="{{hours}}" wx:key style="line-height: 50px">{{item}}</view> </picker-view-column> <picker-view-column> <view style="line-height: 50px;text-align: center;">:</view> </picker-view-column> <picker-view-column> <view wx:for="{{minutes}}" wx:key style="line-height: 50px">{{item}}</view> </picker-view-column> <picker-view-column> <view style="line-height: 50px;text-align: center;">~</view> </picker-view-column> <picker-view-column> <view wx:for="{{hours_s}}" wx:key style="line-height: 50px">{{item}}</view> </picker-view-column> <picker-view-column> <view style="line-height: 50px;text-align: center;">:</view> </picker-view-column> <picker-view-column> <view wx:for="{{minutes_s}}" wx:key style="line-height: 50px">{{item}}</view> </picker-view-column> </picker-view> </view> </view>

.wxss文件略


.js文件

const date = new Date() const years = [] const months = [] const days = [] const hours = [] const minutes = [] const hours_s = [] const minutes_s = [] for (let i = 1990; i <= date.getFullYear(); i++) { years.push(i) } for (let i = 1; i <= 12; i++) { months.push(i) } for (let i = 1; i <= 31; i++) { days.push(i) } for (let i = 1; i <= 23; i++) { hours.push(i) // console.log(time.push(i)) } for (let i = 1; i <= 60; i++) { minutes.push(i) // console.log(minutes.push(i)) } for (let i = 1; i <= 23; i++) { hours_s.push(i) // console.log(minutes.push(i)) } for (let i = 1; i <= 60; i++) { minutes_s.push(i) // console.log(minutes.push(i)) } Page({ data: { years: years, year: date.getFullYear(), months: months, month: 2, days: days, day: 2, hours: hours, hour: 3, minutes: minutes, minute: 2, hours_s: hours_s, hours_: 7, minutes_s: minutes_s, minutes_: 9, value: [9999, 1, 1], }, bindChange: function (e) { // console.log(e); const val = e.detail.value this.setData({ year: this.data.years[val[0]], month: this.data.months[val[1]], day: this.data.days[val[2]], hour: this.data.hours[val[3]], minute: this.data.minutes[val[5]], hours_: this.data.hours_s[val[7]], minutes_: this.data.minutes_s[val[9]], }) } })
最新回复(0)