微信小程序实现工作时间段选择

本文实例为大家分享了微信小程序工作时间段选择的具体代码，供大家参考，具体内容如下

1.效果图如上，需完成时间段的选择以及下面的工作日选择保存按钮为表单提交提交后台

2.思路：

时段用采摘者跟投入如果没有占位字符则不需要投入

工作日选择用检验盒多选的样式用标签将检验盒隐藏

标签的选择后的样式跟取消的样式，这里无需判断检查当然也可以判断检查我这里的方法是，先建一个放星期一到星期天的数组日期，选择之后，在射流研究…里返回的细节。价值里找到所选择的日期选择列表，再判断日期是否在选择列表内存在（注意是日期在目录中是否存在)。如果存在则设对应的布尔为没错，否则假的。

下面为代码：

页面结构

！-页数/添加时间/索引。wxml-view class=' main ' view class=' when ' form bind submit=' form submit '按钮formType='submit' id='save '保存/button！-选择时间段-视图类="选择时间"文本时段：/text view class=' section ' picker mode=' time ' value=' { { time } } ' start=' 09:00 ' end=' 21:00 ' bind change=' bindTimeChange ' id=' start time '！-在射流研究…中判断所选采摘者的编号为开始时间时，将价值赋值给开始时间，放在投入内- view class='picker '输入占位符='开始时间value=' { { startTime } } ' name=' startTime '/input/view/picker/view text至/text view class=' section ' picker mode=' time ' value=' { { time } } ' start=' 09:00 ' end=' 21:00 ' bind change=' bindTimeChange ' id=' end time '！-在射流研究…中判断所选采摘者的编号为结束时间时，将价值赋值给结束时间，放在投入内- view class='picker '输入占位符='结束时间value=' { { end time } } ' name=' end time '/input/view/picker/view/view！-选择星期-视图类="选择日期"复选框-组绑定更改="复选框更改"名称="复选框"重复：-写一个班级选择后的背景色，在射流研究…中处理对应布尔值，在班级中用三元式判断布尔并加背景色-label class='复选框{ {选中。星期一？为='星期一'选择了颜色' :''}} '一复选框值='星期一id='星期一'隐藏//标签标签类='复选框{{selected .星期二？为=星期二选择颜色' :''}} '二复选框值='星期二id='星期二'隐藏//标签标签类='复选框{ {选中。星期三？为='星期三'选择了颜色' :''} '三复选框值='星期三id='星期三'隐藏//标签标签类='复选框{ {选中。星期四？为='星期四'选择了颜色' :''} '四复选框值='星期四id='星期四'隐藏//标签标签类='复选框{ { selected.friday？为='星期五'选择了颜色' :''} '五复选框值='星期五id='星期五'隐藏//标签标签类='复选框{ {选中。星期六？为='星期六'选择了颜色' :''}} '六复选框值='星期六id='星期六'隐藏//标签标签类='复选框{{selected.sunday？为='星期日'选择了颜色' :''}} '七复选框值=' Sunday ' id=' Sunday ' hidden//label/checkbox-group/view/form/view/view wx js

//页面/我的/索引。js页面({/* * *页面的初始数据*/data: { startTime:null，endTime: null，selected: { '星期一' :false '星期二' :false '星期五' :false '星期三' :false '星期四' :false '星期日' :false '星期六：false}，//选中内放对应的用来判断班级的布尔json }，bindTimeChange:函数{ if(e . CurrentTarget。id=='开始时间'){ this。setdata({开始时间： e . detail。value })；} else if(即当前目标。id=='结束时间'){ this。setdata({结束时间： e . detail。value })；} }，checkboxChange:函数(e){ var选定列表=e . detail。价值；var date=['星期一','星期二','星期五','星期三','星期四','星期日','星期六'];//包含所有日期的数组var select=this。数据。选中；//先获取数据中的值，好用来赋值for(var I=0；我日期。长度；I){ if(选定列表。indexof(date[I])！=-1) { //判断所有的日期日期在所选择的列表中是否存在，存在则给所选类别[日期[I]]=真；} else { selected[date[I]]=false；} }这个。setdata({ selected : selected })；}，formSubmit:function(e){ //提交后台控制台。日志(e)；},以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。