微信小程序?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)文章
原生JS取代一些JQuery方法的簡(jiǎn)單實(shí)現(xiàn)
下面小編就為大家?guī)硪黄鶭S取代一些JQuery方法的簡(jiǎn)單實(shí)現(xiàn)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-09-09
這篇文章主要為大家詳細(xì)介紹了js仿京東放大鏡，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
微信小程序?qū)崿F(xiàn)判斷是分享到群還是個(gè)人功能示例
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)判斷是分享到群還是個(gè)人功能,結(jié)合實(shí)例形式分析了微信小程序分享與判斷功能的實(shí)現(xiàn)原理、步驟及相關(guān)操作技巧,需要的朋友可以參考下2019-05-05
JavaScript實(shí)現(xiàn)異步獲取表單數(shù)據(jù)
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)異步獲取表單數(shù)據(jù)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-05-05
JavaScript正則表達(dá)式和級(jí)聯(lián)效果
正則表達(dá)式（regular expression）是一種字符串匹配的模式，用來檢查一個(gè)字符串中是否包含指定模式的字符串。下面通過本文給大家分享JavaScript_正則表達(dá)式和級(jí)聯(lián)效果，感興趣的朋友一起看看吧2017-09-09
引入autocomplete組件時(shí)JS報(bào)未結(jié)束字符串常量錯(cuò)誤
在引入jQuery的autocomplete組件時(shí)，遇到j(luò)s報(bào)未結(jié)束字符串常量錯(cuò)誤，原因及解決方法如下，大家可以參考下2014-03-03
PHP實(shí)現(xiàn)基于Redis的MessageQueue隊(duì)列封裝操作示例
這篇文章主要介紹了PHP實(shí)現(xiàn)基于Redis的MessageQueue隊(duì)列封裝操作,結(jié)合實(shí)例形式分析了Redis的PHP消息隊(duì)列封裝與使用相關(guān)操作技巧,需要的朋友可以參考下2019-02-02
Three.js利用dat.GUI如何簡(jiǎn)化試驗(yàn)流程詳解
dat.gui可以方便地向場(chǎng)景中添加控制條，隨時(shí)調(diào)整參數(shù)。下面這篇文章主要給大家介紹了關(guān)于Three.js利用dat.GUI如何簡(jiǎn)化試驗(yàn)流程的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面來一起看看吧。2017-09-09
本文給大家簡(jiǎn)單介紹了下javascript中的字符串和數(shù)組，都是些十分基礎(chǔ)的知識(shí)，小伙伴們要學(xué)好javascript，一定要把這2點(diǎn)理解清楚。2015-06-06
這篇文章主要為大家介紹了WebGL?繪制與變換使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04