微信小程序?qū)崿F(xiàn)時間選擇

更新時間：2022年07月06日 14:53:01 作者：小雅雅家的小凱凱吖

這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)時間選擇，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了微信小程序?qū)崿F(xiàn)時間選擇的具體代碼，供大家參考，具體內(nèi)容如下

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({
?
? /**
? ?* 頁面的初始數(shù)據(jù)
? ?*/
? data: {
? ? currentIndex: 0,
? ? dateValue: '選擇時間',
??
? },
? datePickerBindchange: function (e) {
? ? this.setData({
? ? ? dateValue: e.detail.value
? ? })
? },
? pickChange: function (e) {
? ? this.setData({
? ? ? index: e.detail.value
? ? });
? },
? /**
? ?* 生命周期函數(shù)--監(jiān)聽頁面加載
? ?*/
? onLoad: function (options) {
?
? },
?
? /**
? ?* 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
? ?*/
? onReady: function () {
?
? },
?
? /**
? ?* 生命周期函數(shù)--監(jiān)聽頁面顯示
? ?*/
? onShow: function () {
?
? },
?
? /**
? ?* 生命周期函數(shù)--監(jiān)聽頁面隱藏
? ?*/
? onHide: function () {
?
? },
?
? /**
? ?* 生命周期函數(shù)--監(jiān)聽頁面卸載
? ?*/
? onUnload: function () {
?
? },
?
? /**
? ?* 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動作
? ?*/
? onPullDownRefresh: function () {
?
? },
?
? /**
? ?* 頁面上拉觸底事件的處理函數(shù)
? ?*/
? onReachBottom: function () {
?
? },
?
? /**
? ?* 用戶點擊右上角分享
? ?*/
? onShareAppMessage: function () {
?
? }
})

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: