微信小程序实现工作时间段选择-创新互联

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

成都创新互联从2013年创立，是专业互联网技术服务公司，拥有项目成都做网站、成都网站设计网站策划，项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命，1280元启东做网站,已为上家服务,为启东各地企业和个人服务,联系电话:18980820575

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

2.思路：

①时段用picker跟input  如果没有占位字符  则不需要input

②工作日选择用checkbox  多选的样式用label  将checkbox隐藏

③label的选择后的样式跟取消的样式，这里无需判断checked  当然也可以判断checked  我这里的方法是，先建一个放星期一到星期天的数组date，选择之后，在js里返回的detail.value里找到所选择的日期selectedList，再判断date是否在selectedList内存在（注意是date在list中是否存在）。如果存在则设对应的布尔为true，否则false。

下面为代码：

wxml

 
  

  保存
   
   
     时段：
     
      
      
       
         
       
      
     
     至
    
      
      
      
       
         
       
      
     
   
 
   
   
    
      重复：
      
      
      一
       
 
      
      二
       
 
      
      三
       
 
      
      四
       
 
      
      五
       
 
      
     六
       
 
      
     七
       
 
    
   
  
 

标题名称：微信小程序实现工作时间段选择-创新互联
文章URL：http://www.csruizhi.cn/article/cdsepi.html