微信小程序?qū)崿F(xiàn)日期范圍選擇

更新時間：2022年07月07日 17:09:26 作者：落之辰塵

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

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

樣式如下：

分別點擊開始日期和結(jié)束日期選擇時間（底部彈框）：

date.wxml:

?<view class="range-style mar-top">
? ? ? ? ? ? ? ? <view class="picker-title">日期范圍:</view>
? ? ? ? ? ? ? ? <!-- 時間段 --> ?
? ? ? ? ? ? ? ? ? ? <view class="picker_group"> ?
? ? ? ? ? ? ? ? ? ? <picker mode="date" value="{{startdate}}" ?end="{{enddate}}" bindchange="bindDateChange"> ?
? ? ? ? ? ? ? ? ? ? ? ? <view class="picker"> ?
? ? ? ? ? ? ? ? ? ? ? ? <text class = "{{startdate=='開始日期'?'text-style1':'text-style2'}}">{{startdate}}</text>
? ? ? ? ? ? ? ? ? ? ? ? </view> ?
? ? ? ? ? ? ? ? ? ? </picker> ?
? ? ? ? ? ? ? ? ? ? <text class = "text-style1">~</text>?
? ? ? ? ? ? ? ? ? ? <picker mode="date" value="{{enddate}}" start="{{startdate}}" end="2050-01-01" bindchange="bindDateChange2"> ?
? ? ? ? ? ? ? ? ? ? ? ? <view class="picker"> ?
? ? ? ? ? ? ? ? ? ? ? ? <text class = "{{enddate=='結(jié)束日期'?'text-style1':'text-style2'}}">{{enddate}}</text>?
? ? ? ? ? ? ? ? ? ? ? ? </view> ?
? ? ? ? ? ? ? ? ? ? </picker> ? ? ? ?
? ? ? </view> ?
</view>

date.wxss:

.range-style {
? ? display: flex;
? ? align-items: center;
? ? padding-left: 10rpx;
? ? background-color: #fff;
}
.mar-top {
? ? margin-top: 30rpx;
}
.picker-title {
? ? font-size: 32rpx;
? ? width: 150rpx;
}
.picker_group {
? ? color: #888;
? ? border: 1rpx solid #A4A6AE;
? ? border-radius: 15rpx;
? ? display: flex;
? ? align-items: center;
? ? justify-content: space-between;
? ? padding: 20rpx 30rpx;
? ? font-size: 32rpx;
}
.text-style1{
? ? color:#A4A6AE;
}
.text-style2{
? ? color:rgb(0,0,0,0.8);
}
.picker_group picker {
? ? font-size: 34rpx;
? ? height: 45rpx;
? ? padding-left:20rpx;
? ? padding-right:20rpx;
? ? line-height: 45rpx;
}

date.js:

Page({
? data: {
??
? ? startdate: '開始日期',//默認起始時間 ?
? ? enddate: '結(jié)束日期',//默認結(jié)束時間?
?
? },
?
? bindDateChange(e) {
? ? let that = this;
? ? console.log(e.detail.value)
? ? that.setData({
? ? ? startdate: e.detail.value,
? ? })
? },
? bindDateChange2(e) {
? ? let that = this;
? ? console.log(e.detail.value)
? ? that.setData({
? ? ? enddate: e.detail.value,
? ? })
? },
?
})

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

您可能感興趣的文章: