解析微信小程序如何實現日期范圍選擇

3403771864 發布于2023-02-27 22:32 / 1800人閱讀

　　本篇文章主要為大家講述關于在微信小程序中如何實現日期范圍的選擇。

　　具體樣式如下：

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

　　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=='結束日期'?'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: '結束日期',//默認結束時間
　　},
　　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,
　　})
　　},
　　})

　　全部內容已講述完畢，歡迎大家關注更多后續精彩內容。

云服務器 GPU云服務器微信小程序技術實現微信小程序如何快速微信小程序如何開發如何創作微信小程序

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/130323.html

從零開始：微信小程序新手入門寶典《一》

摘要：為了方便大家了解并入門微信小程序，我將一些可能會需要的知識，列在這里，讓大家方便的從零開始學習一微信小程序的特點張小龍張小龍全面闡述小程序，推薦通讀此文小程序是一種不需要下載安裝即可使用的應用，它出現了觸手可及的夢想，用戶掃一掃或者搜一下即為了方便大家了解并入門微信小程序，我將一些可能會需要的知識，列在這里，讓大家方便的從零開始學習；一：微信小程序的特點張小龍：張小龍全面闡述小程...

whataa 2019-07-25 11:18 評論0 收藏0
從零開始：微信小程序新手入門寶典《一》

摘要：為了方便大家了解并入門微信小程序，我將一些可能會需要的知識，列在這里，讓大家方便的從零開始學習一微信小程序的特點張小龍張小龍全面闡述小程序，推薦通讀此文小程序是一種不需要下載安裝即可使用的應用，它出現了觸手可及的夢想，用戶掃一掃或者搜一下即為了方便大家了解并入門微信小程序，我將一些可能會需要的知識，列在這里，讓大家方便的從零開始學習；一：微信小程序的特點張小龍：張小龍全面闡述小程...

mdluo 2019-08-21 15:02 評論0 收藏0
從零開始：微信小程序新手入門寶典《一》

摘要：為了方便大家了解并入門微信小程序，我將一些可能會需要的知識，列在這里，讓大家方便的從零開始學習一微信小程序的特點張小龍張小龍全面闡述小程序，推薦通讀此文小程序是一種不需要下載安裝即可使用的應用，它出現了觸手可及的夢想，用戶掃一掃或者搜一下即為了方便大家了解并入門微信小程序，我將一些可能會需要的知識，列在這里，讓大家方便的從零開始學習；一：微信小程序的特點張小龍：張小龍全面闡述小程...

LdhAndroid 2019-08-14 17:08 評論0 收藏0
前端基礎入門

摘要：手把手教你做個人火的時候，隨便一個都能賺的盆滿缽滿，但是，個人沒有服務端，沒有美工，似乎就不能開發了，真的是這樣的嗎秘密花園經典的中文手冊。涵蓋前端知識體系知識結構圖書推薦以及入門視頻教程，全的簡直不要不要的了。 JavaScript 實現點擊按鈕復制指定區域文本 html5 的 webAPI 接口可以很輕松的使用短短的幾行代碼就實現點擊按鈕復制區域文本的功能，不需要依賴 flash。...

shinezejian 2019-08-22 13:51 評論0 收藏0