微信小程序实现日期范围选择
更新时间:2022年07月07日 17:09:26 作者:落之辰尘
这篇文章主要为大家详细介绍了微信小程序实现日期范围选择,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了微信小程序实现日期范围选择的具体代码,供大家参考,具体内容如下
样式如下:
分别点击开始日期和结束日期选择时间(底部弹框):
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, }) }, })
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
引入autocomplete组件时JS报未结束字符串常量错误
在引入jQuery的autocomplete组件时,遇到js报未结束字符串常量错误,原因及解决方法如下,大家可以参考下2014-03-03PHP实现基于Redis的MessageQueue队列封装操作示例
这篇文章主要介绍了PHP实现基于Redis的MessageQueue队列封装操作,结合实例形式分析了Redis的PHP消息队列封装与使用相关操作技巧,需要的朋友可以参考下2019-02-02
最新评论