微信小程序时间选择插件使用详解
程序员文章站
2024-01-17 12:24:40
微信小程序时间选择插件-弹出选择,供大家参考,具体内容如下
wxml
微信小程序时间选择插件-弹出选择,供大家参考,具体内容如下
wxml
<modal class="modal" hidden="{{flag}}" no-cancel bindconfirm="gettime" confirmtext="确定"> <view class="modal-content"> <view class="time_screens" > <view style="text-align:center;color:#45bce8">{{year}}-{{month}}-{{day}} {{hour}}:{{minute}}</view> <view style="border-top:1px solid #45bce8;height:25px;font-size:14px;"> <view class="time-title">年</view> <view class="time-title">月</view> <view class="time-title">日</view> <view class="time-title">时</view> <view class="time-title">分</view> </view> <picker-view indicator-style="height: 50px;" style="width: 100%; height: 300px;" value="{{value}}" bindchange="bindchange"> <picker-view-column class="picker-text"> <view wx:for="{{years}}" style="line-height: 50px">{{item}}</view> </picker-view-column> <picker-view-column class="picker-text"> <view wx:for="{{months}}" style="line-height: 50px">{{item}}</view> </picker-view-column> <picker-view-column class="picker-text"> <view wx:for="{{days}}" style="line-height: 50px">{{item}}</view> </picker-view-column> <picker-view-column class="picker-text"> <view wx:for="{{hours}}" style="line-height: 50px">{{item}}</view> </picker-view-column> <picker-view-column class="picker-text"> <view wx:for="{{minutes}}" style="line-height: 50px">{{item}}</view> </picker-view-column> </picker-view> </view> </view> </modal >
js:
const date = new date() const years = [] const months = [] const days = [] const hours = [] const minutes = [] var thismon = date.getmonth(); var thisday = date.getdate(); var thishours = date.gethours(); var thisminutes = date.getminutes(); for (let i = 2017; i <= date.getfullyear() + 1; i++) { years.push(i) } for (let i = date.getmonth(); i <= 11; i++) { var k = i; if (0 <= i && i < 9) { k = "0" + (i + 1); } else { k = (i + 1); } months.push(k) } if (0 <= thismon && thismon < 9) { thismon = "0" + (thismon + 1); } else { thismon = (thismon + 1); } if (0 <= thisday && thisday < 10) { thisday = "0" + thisday; } var totalday = mgetdate(date.getfullyear(), thismon); for (let i = 1; i <= 31; i++) { var k = i; if (0 <= i && i < 10) { k = "0" + i } days.push(k) } for (let i = 0; i <= 23; i++) { var k = i; if (0 <= i && i < 10) { k = "0" + i } hours.push(k) } for (let i = 0; i <= 59; i++) { var k = i; if (0 <= i && i < 10) { k = "0" + i } minutes.push(k) } function mgetdate(year, month) { var d = new date(year, month, 0); return d.getdate(); } var app = getapp(); var api = app.globaldata.api; page({ /** * 页面的初始数据 */ data: { checktime: date.getfullyear() + "-" + thismon + "-" + thisday + " " + thishours + ":" + thisminutes, //---时间控件参数 flag: true, years: years, year: date.getfullyear(), months: months, month: thismon, days: days, day: thisday, value: [1, thismon - 1, thisday - 1, 0, 0], hours: hours, hour: thishours, minutes: minutes, minute: thisminutes, }, showmodel: function (e) { this.setdata({ flag: false }); }, gettime: function (e) { var times = this.data.year + "-" + this.data.month + "-" + this.data.day + " " + this.data.hour + ":" + this.data.minute this.setdata({ flag: true, checktime: times }); }, bindchange: function (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[4]], }) var totalday = mgetdate(this.data.year, this.data.month); var changedate = []; for (let i = 1; i <= totalday; i++) { var k = i; if (0 <= i && i < 10) { k = "0" + i } changedate.push(k) } this.setdata({ days: changedate }) }, })
css:
.kouviewlist{ background-color: #f7f7f7; } .kouview{ height:170px; margin-top:5px; } .kouviews{ height:150px; margin-top:5px; } .time-title{ float:left;width:20%;text-align:center;color:#45bce8 } .picker-text{ text-align:center; }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。