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


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 相关文章推荐
两个DIV等高的JS的实现代码
Dec 23 Javascript
javascript 伪数组实现方法
Oct 11 Javascript
JavaScript中json使用自己总结
Aug 13 Javascript
innerHTML,outerHTML,innerText,outerText的用法及区别解析
Dec 16 Javascript
jQuery树形下拉菜单特效代码分享
Aug 15 Javascript
Jquery技巧(必须掌握)
Mar 16 Javascript
扩展Bootstrap Tooltip插件使其可交互的方法
Nov 07 Javascript
JavaScript 有用的代码片段和 trick
Feb 22 Javascript
vue实现文字横向无缝走马灯组件效果的实例代码
Apr 09 Javascript
小程序实现订单倒计时功能
Apr 23 Javascript
小程序实现短信登录倒计时
Jul 12 Javascript
解决vue字符串换行问题(绝对管用)
Aug 06 Javascript
微信小程序实现展示评分结果功能
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
php读取本地文件常用函数(fopen与file_get_contents)
2013/09/09 PHP
php实现汉字验证码和算式验证码的方法
2015/03/07 PHP
php去除字符串中空字符的常用方法小结
2015/03/17 PHP
laravel获取不到session的三种解决办法【推荐】
2018/09/16 PHP
PHP封装的page分页类定义与用法完整示例
2018/12/24 PHP
javascript变量作用域使用中常见错误总结
2013/03/26 Javascript
深入理解JavaScript系列(47):对象创建模式(上篇)
2015/03/04 Javascript
AngularJS实现网站换肤实例
2021/02/19 Javascript
JavaScript模板引擎应用场景及实现原理详解
2018/12/14 Javascript
可能被忽略的一些JavaScript数组方法细节
2019/02/28 Javascript
layui之table checkbox初始化时选中对应选项的方法
2019/09/02 Javascript
[40:17]2018DOTA2亚洲邀请赛 4.5 淘汰赛 LGD vs Liquid 第一场
2018/04/06 DOTA
Python中文件I/O高效操作处理的技巧分享
2017/02/04 Python
Python使用Selenium爬取淘宝异步加载的数据方法
2018/12/17 Python
Python基础教程之if判断,while循环,循环嵌套
2019/04/25 Python
初次部署django+gunicorn+nginx的方法步骤
2019/09/11 Python
如何使用python进行pdf文件分割
2019/11/11 Python
简单了解Python读取大文件代码实例
2019/12/18 Python
tensorflow入门:TFRecordDataset变长数据的batch读取详解
2020/01/20 Python
python实现文件+参数发送request的实例代码
2021/01/05 Python
CSS3不透明度实例讲解
2016/04/26 HTML / CSS
美国Lolё官网:购买大胆而美丽的女性运动服装
2017/05/22 全球购物
德国知名健康零食网上商店:Seeberger
2017/07/27 全球购物
轻松制作精彩视频:Animoto
2018/09/19 全球购物
iPad和Surface Pro蓝牙键盘:Brydge
2018/11/10 全球购物
ColourPop美国官网:卡拉泡泡,洛杉矶彩妆品牌
2019/04/28 全球购物
市场部管理制度
2014/02/02 职场文书
幼儿园中班区域活动总结
2014/07/09 职场文书
公司介绍信范文
2015/01/31 职场文书
2015年安全保卫工作总结
2015/05/14 职场文书
刑事附带民事上诉状
2015/05/23 职场文书
党小组考察意见
2015/06/02 职场文书
python基础之匿名函数详解
2021/04/21 Python
Python 如何解决稀疏矩阵运算
2021/05/26 Python
MySQL对数据表已有表进行分区表的实现
2021/11/01 MySQL
SQL语句多表联合查询的方法示例
2022/04/18 MySQL