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


Posted in Javascript onFebruary 15, 2019

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

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

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

2.思路:

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

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

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

下面为代码:

wxml

<!--pages/addtime/index.wxml-->
<view class='main'>
 <view class='when'>
  <form bindsubmit='formSubmit'>
  <button formType='submit' id='save'>保存</button>
   <!-- 选择时间段 -->
   <view class="selectTime">
     <text>时段:</text>
     <view class="section">
      <picker mode="time" value="{{time}}" start="09:00" end="21:00" bindchange="bindTimeChange" id='startTime'>
      <!-- 在js中判断所选picker的id为startTime时,将value赋值给startTime,放在input内 -->
       <view class="picker">
         <input placeholder='开始时间' value='{{startTime}}' name="startTime"></input>
       </view>
      </picker>
     </view>
     <text>至</text>
    <view class="section">
      <picker mode="time" value="{{time}}" start="09:00" end="21:00" bindchange="bindTimeChange" id='endTime'>
      <!-- 在js中判断所选picker的id为endTime时,将value赋值给endTime,放在input内 -->
      
       <view class="picker">
         <input placeholder='结束时间' value='{{endTime}}' name="endTime"></input>
       </view>
      </picker>
     </view>
   </view>
 
   <!-- 选择星期 -->
   <view class='selectDay'>
    <checkbox-group bindchange="checkboxChange" name="checkbox">
      重复:
      <!--写一个class选择后的背景色,在js中处理对应布尔值,在class中用三元式判断布尔并加背景色 -->
      <label class="checkbox {{selected.monday?'selectedColor':''}}" for='monday'>
      一
       <checkbox value="monday" id='monday' hidden/>
      </label>
 
      <label class="checkbox {{selected.tuesday?'selectedColor':''}}" for='tuesday'>
      二
       <checkbox value="tuesday" id='tuesday' hidden/>
      </label>
 
      <label class="checkbox {{selected.wednesday?'selectedColor':''}}" for='wednesday'>
      三
       <checkbox value="wednesday" id='wednesday' hidden/>
      </label>
 
      <label class="checkbox {{selected.thursday?'selectedColor':''}}" for='thursday'>
      四
       <checkbox value="thursday" id='thursday' hidden/>
      </label>
 
      <label class="checkbox {{selected.friday?'selectedColor':''}}" for='friday'>
      五
       <checkbox value="friday" id='friday' hidden/>
      </label>
 
      <label class="checkbox {{selected.saturday?'selectedColor':''}}" for='saturday'>
     六
       <checkbox value="saturday" id='saturday' hidden/>
      </label>
 
      <label class="checkbox {{selected.sunday?'selectedColor':''}}" for='sunday'>
     七
       <checkbox value="sunday" id='sunday' hidden/>
      </label>
 
    </checkbox-group>
   </view>
  </form>
 </view>
</view>

wx js

// pages/mine/index.js
Page({
 
 /**
  * 页面的初始数据
  */
 data: {
  startTime:null,
  endTime: null,
  selected: {"monday":false,"tuesday":false,"friday":false,"wednesday":false,"thursday":false,"sunday":false,"saturday":false},
 // selected内放对应的用来判断class的布尔json
 },
 bindTimeChange: function(e){
  if (e.currentTarget.id=="startTime") {
   this.setData({startTime:e.detail.value});
  }else if (e.currentTarget.id=="endTime") {
   this.setData({endTime:e.detail.value});
  }
 },
 checkboxChange: function(e){
  var selectedList = e.detail.value;
  var date = ["monday","tuesday","friday","wednesday","thursday","sunday","saturday"];//包含所有日期的数组
  var selected = this.data.selected;//先获取data中的值,好用来赋值
  for (var i = 0; i < date.length; i++) {
   if (selectedList.indexOf(date[i])!=-1) { //判断所有的日期date在所选择的列表中是否存在,存在则给class
    selected[date[i]] = true;
   }else{
    selected[date[i]] = false;
   }
  }
   this.setData({selected:selected});
 },
 formSubmit:function(e){
  //提交后台
  console.log(e);
 },

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript等比例缩放图片控制超出范围的图片
Aug 06 Javascript
jquery的选择器的使用技巧之如何选择input框
Sep 22 Javascript
javascript中的throttle和debounce浅析
Jun 06 Javascript
基于BootStrap Metronic开发框架经验小结【八】框架功能总体界面介绍
May 12 Javascript
微信js-sdk界面操作接口用法示例
Oct 12 Javascript
微信小程序之数据双向绑定与数据操作
May 12 Javascript
ReactJs设置css样式的方法
Jun 08 Javascript
纯JS实现简单的日历
Jun 26 Javascript
详解vue express启动数据服务
Jul 05 Javascript
原生JS实现手动轮播图效果实例代码
Nov 22 Javascript
Vant的安装和配合引入Vue.js项目里的方法步骤
Dec 05 Javascript
vue前端工程的搭建
Mar 31 Vue.js
微信小程序实现展示评分结果功能
Feb 15 #Javascript
微信小程序时间标签和时间范围的联动效果
Feb 15 #Javascript
微信小程序实现商品属性联动选择
Feb 15 #Javascript
微信小程序实现购物页面左右联动
Feb 15 #Javascript
微信小程序基于picker实现级联菜单
Feb 15 #Javascript
微信小程序实现多个按钮的颜色状态转换
Feb 15 #Javascript
详解react-refetch的使用小例子
Feb 15 #Javascript
You might like
mysql_fetch_assoc和mysql_fetch_row的功能加起来就是mysql_fetch_array
2007/01/15 PHP
php+mysql开源XNA 聚合程序发布 下载
2007/07/13 PHP
php cc攻击代码与防范方法
2012/10/18 PHP
给WordPress中的留言加上楼层号的PHP代码实例
2015/12/14 PHP
PHP 出现 http500 错误的解决方法
2021/03/09 PHP
javascript 操作Word和Excel的实现代码
2009/10/26 Javascript
JQuery操作三大控件(下拉,单选,复选)的方法
2013/08/06 Javascript
jQuery实现单击按钮遮罩弹出对话框(仿天猫的删除对话框)
2014/04/10 Javascript
javascript中判断json的方法总结
2015/08/27 Javascript
JavaScript编写一个简易购物车功能
2016/09/17 Javascript
JavaScript中this的四个绑定规则总结
2016/09/26 Javascript
Vue.JS入门教程之事件监听
2016/12/01 Javascript
JavaScript实现跟随鼠标移动的盒子
2021/01/28 Javascript
[01:27:30]LGD vs Newbee 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
基于python编写的微博应用
2014/10/17 Python
在Python的列表中利用remove()方法删除元素的教程
2015/05/21 Python
tensorflow实现KNN识别MNIST
2018/03/12 Python
Python3 log10()函数简单用法
2019/02/19 Python
python执行scp命令拷贝文件及文件夹到远程主机的目录方法
2019/07/08 Python
python实现的按要求生成手机号功能示例
2019/10/08 Python
python通过实例讲解反射机制
2019/10/17 Python
三个python爬虫项目实例代码
2019/12/28 Python
Python正则表达式学习小例子
2020/03/03 Python
python库skimage给灰度图像染色的方法示例
2020/04/27 Python
python线性插值解析
2020/07/05 Python
彻底解决Python包下载慢问题
2020/11/15 Python
一波HTML5 Canvas基础绘图实例代码集合
2016/02/28 HTML / CSS
土木建筑学生自我评价
2014/01/14 职场文书
财务工作疏忽检讨书
2014/09/11 职场文书
九寨沟导游词
2015/02/02 职场文书
银行稽核岗位职责
2015/04/13 职场文书
2015年重阳节主持词
2015/07/04 职场文书
六一儿童节新闻稿
2015/07/17 职场文书
Python排序算法之插入排序及其优化方案详解
2021/06/11 Python
java调用Restful接口的三种方法
2021/08/23 Java/Android
关于EntityWrapper的in用法
2022/03/22 Java/Android