解析微信小程序如何实现日期范围选择

3403771864 发布于2023-02-27 22:32 / 1793人阅读

　　本篇文章主要为大家讲述关于在微信小程序中如何实现日期范围的选择。

　　具体样式如下：

　　分别点击开始日期和结束日期选择时间（底部弹框）：

　　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云服务器云服务器微信小程序技术实现微信小程序如何快速微信小程序如何开发如何创作微信小程序

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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