微信小程序?qū)崿F(xiàn)日期范圍選擇
更新時(shí)間：2022年07月07日 17:09:26 作者：落之辰塵
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)日期范圍選擇，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了微信小程序?qū)崿F(xiàn)日期范圍選擇的具體代碼，供大家參考，具體內(nèi)容如下
樣式如下：
分別點(diǎn)擊開始日期和結(jié)束日期選擇時(shí)間（底部彈框）：
date.wxml:
?<view class="range-style mar-top">
? ? ? ? ? ? ? ? <view class="picker-title">日期范圍:</view>
? ? ? ? ? ? ? ? <!-- 時(shí)間段 --> ?
? ? ? ? ? ? ? ? ? ? <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: '開始日期',//默認(rèn)起始時(shí)間 ?
? ? enddate: '結(jié)束日期',//默認(rèn)結(jié)束時(shí)間?
?
? },
?
? 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,
? ? })
? },
?
})以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
微信小程序?qū)崿F(xiàn)列表滾動(dòng)頭部吸頂?shù)氖纠a
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)列表滾動(dòng)頭部吸頂?shù)氖纠a，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
uni-app h5端在jenkins構(gòu)建報(bào)錯(cuò)解決
這篇文章主要為大家介紹了uni-app h5端在jenkins構(gòu)建報(bào)錯(cuò)解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
這篇文章主要介紹了js+canvas繪制五角星的方法,涉及JavaScript調(diào)用canvas組件結(jié)合數(shù)學(xué)運(yùn)算繪制圖形的相關(guān)技巧,需要的朋友可以參考下2016-01-01
JavaScript解析及序列化JSON的方法實(shí)例分析
這篇文章主要介紹了JavaScript解析及序列化JSON的方法,結(jié)合實(shí)例形式分析javascript針對(duì)json格式數(shù)據(jù)的解析、序列化等相關(guān)操作技巧,需要的朋友可以參考下2019-01-01
分別用marquee和div+js實(shí)現(xiàn)首尾相連循環(huán)滾動(dòng)效果，僅3行代碼
這是本人2007年進(jìn)行的一項(xiàng)研究，當(dāng)時(shí)網(wǎng)絡(luò)上沒有什么既精簡(jiǎn)又實(shí)用的循環(huán)滾動(dòng)代碼，所以就自己琢磨了段時(shí)間，最終找到這個(gè)辦法2011-09-09
electron-builder 的基本使用及electron打包步驟
electron-builder 作為一個(gè)用于 Electron 應(yīng)用程序打包的工具,需要下載并使用 Electron 運(yùn)行時(shí)來創(chuàng)建可執(zhí)行文件,這篇文章主要介紹了electron-builder 的基本使用,需要的朋友可以參考下2023-12-12
重置Redux的狀態(tài)數(shù)據(jù)的方法實(shí)現(xiàn)
這篇文章主要介紹了重置Redux的狀態(tài)數(shù)據(jù)的方法實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
JavaScript實(shí)現(xiàn)左右點(diǎn)擊切換圖片
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)簡(jiǎn)易左右點(diǎn)擊切換圖片，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
使用Bootstrap和Vue實(shí)現(xiàn)用戶信息的編輯刪除功能
這篇文章主要介紹了使用Bootstrap和Vue實(shí)現(xiàn)用戶信息的編輯刪除功能,需要的朋友可以參考下
2017-10-10