本文实例为大家分享了微信小程序实现时间选择的具体代码,供大家参考,具体内容如下
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="https://www.atool.online/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="https://www.atool.online/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 () { } })
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持阿兔在线工具。