微信小程序时间标签和时间范围的联动效果

本文实例为大家分享了微信小程序时间标签和时间范围联动的具体代码，供大家参考，具体内容如下

最近忙于一个有关数据管理的微信小程序，遇到了上图情况，虽然很简单，还是整理一下。若有错误，请广大朋友们指正。

使用微信小程序组件无线电组、拾取器，用页面样式表对收音机按照需求进行重构，提货人里边的开始和目标时间是根据收音机来显示的。将开始、结束时间放在数据里收音机发生改变时，改变数据中的时间。当采摘者中的值发生改变时，如果时间范围已经超出了收音机中的范围，需要对收音机的显示进行实时修改。

话不多说，接下来上代码。

index.wxml

view class=' con _ screen ' text class=' cons _ ti '日期范围/text！-单选时间-radio-group class=' radio-group ' bind change=' radio checked change ' block label class=' cons _ radio { { radio checkval==1？活动' :''}} '单选值='1 '隐藏='true'/文本今日/text/label label class=' cons _ radio { { RadioCheckVal==4？活动' :''}} '单选值='4 '隐藏='true' /文本近七日/text/label label class=' cons _ radio { { RadioCheckVal==6？活动' :''}} '单选值='6 '隐藏='true'/文本近30日/文本/标签/区块/单选按钮组！-时间段-view class=' picker _ group ' picker mode=' date ' value=' { { date } } ' start=' 2015-09-01 ' end=' { { date 2 } } ' bind change=' bindDateChange ' view class=' picker ' { date } } image src=' http :/./image/home _ zsr _ icon。png '/图像/视图/选取器到选取器模式='日期'值=' { { date 2 } } ' start=' { { date } } ' end=' 2018-01-24 ' bind change=' binddatechange 2 '视图类='选取器{日期2 } }图像src='http:/./image/home _ zsr _ icon。png '/image/view/picker/view/view索引。页面样式表。单选按钮组{ display : inline-block；}.cons _ radio {左边距： 30 rpx}.cons _ radio text { font-size : 26 rpx；color : # c8c 8 height : 40 rpx/* width : 93rpx；*/边框： # c8 c8固体2rpxpadding:0 20rpx文本对齐：中心；线高： 40 rpx显示器：内联块；边界半径： 20 rpx}/* 黄色*/.cons _ radio。活动文本{ color : # F5a 623边框-颜色： # F5a 623}/* 红色*/.cons _ radio。活动红色文字{ color : # FA2B 21边框-color : # fa2b 21；}/* 蓝色*/.cons _ radio。活动蓝色文字{ color : # 4AAFDD边框-颜色： # 4AAFDD}/* 黄绿色*/.cons _ radio。活动yg文字{ color : # BABC1A边框-颜色： # BABC1A} /* 日期选择*/.picker _ group { display:块；font-size : 28 rpxcolor: # c8c8c8左边距左： 20rpx页边距-top : 15 rpx；}.picker _ group picker { display : }内联块；余量：0 20rpx 0 20rpx相对位置：color: # 232323}。选取器_组选取器图像{ width : 20 rpx h8 : 20 rpx }。cons _ zsr { display:块；font-size : 32 rpx颜色： # 232323左边距左： 40rpx保证金-底部： 15 rpx}.cons_zsr选取器图像{ width : 30 rpxhire : 30 rpx } index . js

页面({ data:{ page: ' '，Loading:false，isLogin:false，radioCheckVal:0，//收益占比单选日期： '2015-09-01 ',//收益占比时间段起始时间日期2:'2018-01-24 ',//收益占比时间段终止时间}, //收益占比单选时间ring RacheckEdChange(e){ 0让那个=这个；那个。setdata({ radocheckval : e . detail。value })控制台。记录(那个。数据。如果(那个。数据。radocheckval==' 1 '){那个。setdata({ date : timedate。格式化日期(现在)，日期2:timedate.formatDate(现在)，})//控制台。log(that.data.date '-。数据。约会。时间fn(那。数据。arrayindex那个。数据。日期，那个.收益占比时间段选择bindDateChange(e){ 0让那个=这个；控制台。日志(例如详细信息。值)那。setdata({ date : e . detail。value，radioCheckVal:0，})表示。时间fn(那。数据。arrayindex，that.data.date，that.data.date2) }，BindDatechange 2(e){让that=this那个。setdata({ date 2: e . detail。value，radioCheckVal:0，})表示。时间fn 2(即。数据。arrayindex，that.data.date，that.data.date2) }，以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。