微信小程序中如何实现日期范围的选择
在微信小程序中实现日期范围选择其实非常简单，只需通过picker组件即可实现。具体样式和代码如下：
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,
})
},
})以上就是在微信小程序中实现日期范围选择的方法，希望对大家有所帮助。
原创文章，作者：小编小本本，如若转载，请注明出处：https://www.benjiyun.com/yunzhujiyunwei/vps-yunwei/5729.html
相关推荐
-
Java中如何避免重复提交请求
背景 本际云服务器推荐网的小编小本本在使用系统过程中，经常碰到这种情况：网页响应很慢，提交请求后发现没反应，然后就会反复点击提交按钮。查看后台日志后发现一个同样的请求提交了多次，后…
-
python数字图像处理之对比度与亮度调整示例
Python数字图像处理流程及常见问题 作为本站的小编，我来为大家详细介绍Python数字图像处理的一些问题，包括对比度和亮度的调整，以及提供具体的实例。 skimage包的exp…
-
centos快速安装python（附：centos python2.7升级到3.7教程）
在 CentOS 中安装 Python，您可以使用以下命令： 如果您想安装 Python 2，可以使用以下命令： pythonCopy code# yum install pyth…
-
Mongodb增量备份和基于时间点恢复
介绍 作为数据库管理员，备份是日常工作之一，包括物理备份和逻辑备份。Mongodb官方并没有提供物理备份工具，但在Mongodb复制集中，我们可以使用oplog备份来进行增量备份和…
-
“Nginx技术在域名获取中的应用”
背景 Nginx是一种广受欢迎的Web服务器，它以其高性能、高可靠性和多功能性而闻名。在域名获取中，需要使用DNS（Domain Name System）服务器来接收域名请求并解析…
-
应用负载均衡：如何选择品牌？
随着互联网技术和云计算的不断发展，负载均衡在现代网络中扮演着越来越重要的角色。它能帮助服务器分担网络负载，加快请求响应速度，提高系统的整体性能。 如何选择适合自己企业的负载均衡品牌…
-
Pygame精准检测图象撞击问题
Pygame精准检测图像撞击 作为本际云服务器推荐网的小编小本本，今天给大家介绍如何使用Pygame实现精准检测图像撞击。在使用Pygame写游戏时，有些人可能遇到两个Rect目标…
-
使用触发器限制表数据被修改
使用触发器限制表数据被修改 在日常维护工作中，我们有时需要对某张表限制修改，但是权限控制不一定能够限制某些特定用户的修改。这时候可以通过创建触发器来限制并提醒对方，当前表暂时不允许…
-
致敬2021年奋斗的IT人，2022年我们携手继续奔跑
致敬2021年奋斗的IT人 在这个数字时代，IT人的工作意义重大。他们的辛勤奋斗为我们的生活提供了很多便利。他们就像是一群无私的战士，为了保障网络的繁荣与信息的安全，全天候巡视着网…
-
国内做的比较好的私有云厂商有哪些？
UCloudstack优钛私有云 我是本际云服务器推荐网的小编小本本，今天为大家介绍UCloudstack优钛私有云。该私有云基于UCloud公有云基础架构，复用公有云内核及核心虚…