微信小程序实现时间选择

本文实例为大家分享了微信小程序实现时间选择的具体代码，供大家参考，具体内容如下 

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 () {
?
? }
})

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

查看更多关于微信小程序实现时间选择的详细内容...