小程序年月日时选择器
发布时间
阅读量：
阅读量
wxml：
<view class="other" bindtap="timePickerShow">
<!-- 预约时间选择器 -->
<view wx:if="{{timePicker}}" class="isTimePicker">
<view class="timePickerCancel" bindtap="timePickerCancel">取消</view>
<view class="timePickerData" >{{year}}年{{month}}月{{day}}日{{hour}}点</view>
<view class="timePickerSubmit" bindtap="timePickerSubmit">确定</view>
<picker-view class="pickerView" indicator-style="height: 50px;" value="{{value}}" bindchange="bindChange">
<picker-view-column>
<view wx:for="{{years}}" class="pickerViewColumn" wx:key="item">{{item}}年</view>
</picker-view-column>
<picker-view-column>
<view wx:for="{{months}}" class="pickerViewColumn" wx:key="item">{{item}}月</view>
</picker-view-column>
<picker-view-column>
<view wx:for="{{days}}" class="pickerViewColumn" wx:key="item">{{item}}日</view>
</picker-view-column>
<picker-view-column>
<view wx:for="{{hours}}" class="pickerViewColumn" wx:key="item">{{item}}点</view>
</picker-view-column>
</picker-view>
</view>
AI写代码wxss：
.isTimePicker{
width: 100%;
height: 500rpx;
background: #fff;
position: fixed;
bottom: 0;
z-index: 2
}
.timePickerCancel{
display: inline-block;
width: 20%;
text-align: center;
height: 80rpx;
line-height: 80rpx;
color: #666;
border-bottom: 1rpx solid #eee;
}
.timePickerData{
display: inline-block;
border-bottom: 1rpx solid #eee;
width: 60%;
text-align: center;
height: 80rpx;
line-height: 80rpx;
color: #999;
}
.timePickerSubmit{
border-bottom: 1rpx solid #eee;
display: inline-block;
width: 20%;
text-align: center;
height: 80rpx;
line-height: 80rpx;
color: rgb(19, 207, 129);
}
.pickerView{
width: 100%;
height: 300px;
}
.pickerViewColumn{
line-height: 50px;
text-align: center;
}
AI写代码js：
// pages/beauty/beauty.js
const date = new Date()
const years = []
const months = []
const days = []
const hours = []
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 <= 24; i++) {
hours.push(i)
}
Page({
/** * 页面的初始数据
*/
data: {
years: years,
year: date.getFullYear(),
months: months,
month:"",//月默认值
days: days,
day:"",//天默认值
hours: hours,
hour: "",//时默认值
value: [],//时间选择器默认value
timePicker:false
},
onLoad: function (options) {
this.setTimeData()
},
//滑动改变时间选择器
bindChange: function (e) {
const val = e.detail.value
console.log(val)
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]]
})
},
//显示时间选择器
timePickerShow(){
this.setData({
timePicker:true
})
},
//取消时间选择器
timePickerCancel(){
this.setData({
timePicker: false
})
},
// 提交时间
timePickerSubmit(){
var timesData = {};
timesData.year = this.data.year;
timesData.month = this.data.month;
timesData.day = this.data.day;
timesData.time = this.data.hour;
console.log(timesData);
this.setData({
timePicker: false
})
},
// 当前时间赋值给时间选择器
setTimeData(){
var dates = new Date();
var isYear = dates.getYear();
var isMonth = dates.getMonth();
var isDate = dates.getDate();
var isHours = date.getHours();
this.setData({
value: [isYear, isMonth, isDate, isHours],
month: isMonth,
date: isDate,
hour: isHours
})
console.log(dates)
},
/** * 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/** * 生命周期函数--监听页面显示
*/
onShow: function () {
},
/** * 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/** * 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/** * 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/** * 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/** * 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
AI写代码全部评论 (0)
还没有任何评论哟~