本文实例为大家分享了微信小程序工作时间段选择的具体代码,供大家参考,具体内容如下
1。效果图如上,需完成时间段的选择,以及下面的工作日选择,保存按钮为formSubmit提交后台
2。思路:
①时段用选择跟输入,如果没有占位字符,则不需要输入
②工作日选择用复选框,多选的样式用标签,将复选框隐藏
③标签的选择后的样式跟取消的样式,这里无需判断检查,当然也可以判断了,我这里的方法是,先建一个放星期一到星期天的数组日期,选择之后,在js里返回的detail.value里找到所选择的日期selectedList,再判断如果存在则设对应的布尔为真的,否则假。
下面为代码:
wxml
& lt; !——页面/addtime index.wxml——比;
& lt;视图类=爸饕北?
& lt;视图类=暗薄北?
& lt;形式bindsubmit=formSubmit的祝辞
& lt;按钮formType='提交' id=罢取钡脑诒４? lt;/button>
& lt; !——选择时间段——比;
& lt;视图类=皊electTime”比;
& lt; text>时段:& lt;/text>
& lt;视图类=敖凇北?
& lt;选择模式="时间" value=" https://www.yisu.com/zixun/{{时间}}”开始=?”结束=?1:00”bindchange=id=翱际奔洹北取癰indTimeChange”;
& lt; !——在js中判断所选选择器的id为开始时间时,将值赋值给开始时间,放在输入内——比;
& lt;视图类=把≡衿鳌北?
& lt;输入占位符='开始时间的value=' https://www.yisu.com/zixun/{{开始时间}}' name=翱际奔洹弊４? lt;/input>
& lt;/view>
& lt;/picker>
& lt;/view>
& lt; text>至& lt;/text>
& lt;视图类=敖凇北?
& lt;选择模式="时间" value=" https://www.yisu.com/zixun/{{时间}}”开始=?”结束=?1:00”bindchange=id=癳ndTime”比“bindTimeChange”;
& lt; !——在js中判断所选选择器的id为endTime时,将值赋值给endTime,放在输入内——比;
& lt;视图类=把≡衿鳌北?
& lt;输入占位符='结束时间的value=' https://www.yisu.com/zixun/{{endTime}} ' name=" endTime祝辞& lt;/input>
& lt;/view>
& lt;/picker>
& lt;/view>
& lt;/view>
& lt; !——选择星期——比;
& lt;视图类=selectDay的祝辞
& lt;复选框组bindchange=" checkboxChange " name=案囱】颉北?
重复:
& lt; !——写一个类选择后的背景色,在js中处理对应布尔值,在类中用三元式判断布尔并加背景色——比;
& lt;标签类="复选框{{selected.monday& # 63;“selectedColor”:“}}”=爸芤弧北?
一
& lt;复选框值=" https://www.yisu.com/zixun/monday " id=爸芤弧币?比;
& lt;/label>
& lt;标签类="复选框{{selected.tuesday& # 63;“selectedColor”:“}}”=爸芏北?
二
& lt;复选框值=" https://www.yisu.com/zixun/tuesday " id=爸芏币?比;
& lt;/label>
& lt;标签类="复选框{{selected.wednesday& # 63;“selectedColor”:“}}”=靶瞧谌北?
三
& lt;复选框值=" https://www.yisu.com/zixun/wednesday " id=靶瞧谌币?比;
& lt;/label>
& lt;标签类="复选框{{selected.thursday& # 63;“selectedColor”:“}}”=靶瞧谒摹北?
四
& lt;复选框值=" https://www.yisu.com/zixun/thursday " id=靶瞧谒摹币?比;
& lt;/label>
& lt;标签类="复选框{{selected.friday& # 63;“selectedColor”:“}}”=靶瞧谖濉北?
五
& lt;复选框值=" https://www.yisu.com/zixun/friday " id=靶瞧谖濉币?比;
& lt;/label>
& lt;标签类="复选框{{selected.saturday& # 63;“selectedColor”:“}}”=靶瞧诹北?
六
& lt;复选框值=" https://www.yisu.com/zixun/saturday " id=靶瞧诹币?比;
& lt;/label>
& lt;标签类="复选框{{selected.sunday& # 63;“selectedColor”:“}}='星期天'比;
七
& lt;复选框值=" https://www.yisu.com/zixun/sunday " id=靶瞧谔臁币?比;
& lt;/label>
& lt;/checkbox-group>
& lt;/view>
& lt;/form>
& lt;/view>
& lt;/view>
wx js
//页面/矿山/index.js
页面({/* *
*页面的初始数据
*/数据:{
开始时间:空,
endTime:空,
选择:{“周一”:假的,“周二”:假的,“星期五”:假的,“星期三”:假的,“星期四”:假的,“周日”:假的,“星期六”:假},//选择内放对应的用来判断类的布尔json
}，
bindTimeChange:函数(e) {
如果(e.currentTarget.id==翱际奔洹?{
this.setData({开始时间:e.detail.value});
}else if (e.currentTarget.id==癳ndTime”) {
this.setData ({endTime: e.detail.value});
}
}，
checkboxChange:函数(e) {
var selectedList=e.detail.value;
var=日期(“星期一”,“周二”、“星期五”,“日”,“星期四”,“星期日”,“星期六”);//包含所有日期的数组
var=this.data.selected;选择//先获中取数据的值,好用来赋值
(var=0;我& lt;date.length;我+ +){
如果(selectedList.indexOf(日期[我])!=1){//判断所有的日期日期在所选择的列表中是否存在,存在则给类
选择[我][日期]=true;
其他}{
选择[我][日期]=false;
}
}
this.setData({选择:选择});
}，
formSubmit:函数(e) {//提交后台
console.log (e);
},
