微信小程序实现时间选择
作者：小雅雅家的小凯凯吖
这篇文章主要为大家详细介绍了微信小程序实现时间选择，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了微信小程序实现时间选择的具体代码，供大家参考，具体内容如下
xml:
<view class="day-check" style="position:fixed;">
<picker class="picker_color" mode="date" value="{{dateValue}}" bindchange="datePickerBindchange">
<view class="line-left"></view>
<view class="turn_down_view">
<text class="picker_text">{{dateValue}}</text>
<image class="img_down" src="/pages/images/turn_down.png"></image>
</view>
</picker>
<text class="text_check">至</text>
<picker class="picker_color" mode="date" value="{{dateValue}}" bindchange="datePickerBindchange">
<view class="line-left"></view>
<view class="turn_down_view">
<text class="picker_text">{{dateValue}}</text>
<image class="img_down" src="/pages/images/turn_down.png"></image>
</view>
</picker>
</view>
<view class="line_view"></view>css:
.day-check {
width: 100%;
height: 30px;
display: flex;
flex-direction: row;
justify-content: center;
border-bottom: 1px solid rgb(212, 212, 212);
}
.picker_color {
width: 50%;
height: 30px;
line-height: 30px;
}
.turn_down_view {
width: 100%;
height: 30px;
display: flex;
flex-direction: row;
justify-content: center;
}
.picker_text {
width: 50%;
height: 30px;
line-height: 30px;
font-size: 30rpx;
text-align: center;
}
.img_down {
width: 20px;
height: 20px;
margin-top: 5px;
}
.text_check {
width: 6%;
height: 30px;
line-height: 30px;
font-size: 30rpx;
text-align: center;
}
.order_query_item:active{
background-color: rgb(223, 11, 11);
}js:
var animation
// 时间
const date = new Date()
const years = []
const months = []
const days = []
for (let i = 1990; i <= date.getFullYear(); i++) {
years.push(i)
}
for (let i = 1; i <= 12; i++) {
var k = i;
if (0 <= i && i <= 9) {
k = "0" + (i);
} else {
k = (i);
}
months.push(k)
}
for (let i = 1; i <= 31; i++) {
var k = i;
if (0 <= i && i <= 9) {
k = "0" + (i);
} else {
k = (i);
}
days.push(k)
}
Page({
/**
* 页面的初始数据
*/
data: {
currentIndex: 0,
dateValue: '选择时间',
},
datePickerBindchange: function (e) {
this.setData({
dateValue: e.detail.value
})
},
pickChange: function (e) {
this.setData({
index: e.detail.value
});
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。