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


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 相关文章推荐
无缝滚动改进版支持上下左右滚动(封装成函数)
Dec 04 Javascript
JavaScript实现网页上的浮动广告的简单方法
Jun 14 Javascript
jQuery进行组件开发完整实例
Dec 15 Javascript
Bootstrap3制作图片轮播效果
May 12 Javascript
Node.js与MySQL交互操作及其注意事项
Oct 05 Javascript
jQuery模拟完美实现经典FLASH导航动画效果【附demo源码下载】
Nov 09 Javascript
JS鼠标滚动分页效果示例
Jul 05 Javascript
通过vue提供的keep-alive减少对服务器的请求次数
Apr 01 Javascript
javascript深拷贝、浅拷贝和循环引用深入理解
May 27 Javascript
js正则匹配多个全部数据问题
Dec 20 Javascript
Node.js API详解之 util模块用法实例分析
May 09 Javascript
jQuery-App输入框实现实时搜索
Nov 19 jQuery
微信小程序实现展示评分结果功能
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中实现生成静态文件的方法缓解服务器压力
2014/01/07 PHP
php之Smarty模板使用方法示例详解
2014/07/08 PHP
JavaScript 判断浏览器类型及版本
2009/02/21 Javascript
javascript dom代码应用 简单的相册[firefox only]
2010/06/12 Javascript
IE6下出现JavaScript未结束的字符串常量错误的解决方法
2010/11/21 Javascript
Jquery多选下拉列表插件jquery multiselect功能介绍及使用
2013/05/24 Javascript
jsp js鼠标移动到指定区域显示选项卡离开时隐藏示例
2013/06/14 Javascript
js鼠标滑轮滚动事件绑定的简单实例(兼容主流浏览器)
2014/01/14 Javascript
JS 获取鼠标左右键的键值方法
2014/10/11 Javascript
jQuery中的pushStack实现原理和应用实例
2015/02/03 Javascript
常用的JavaScript模板引擎介绍
2015/02/28 Javascript
Jquery1.9.1源码分析系列(十五)动画处理之外篇
2015/12/04 Javascript
老生常谈JavaScript 正则表达式语法
2016/08/20 Javascript
深入理解Node.js的HTTP模块
2016/10/12 Javascript
js获取当前时间(昨天、今天、明天)
2016/11/23 Javascript
jQuery实现点击关注和取消功能
2017/07/03 jQuery
原生js实现密码输入框值的显示隐藏
2017/07/17 Javascript
JS解析url查询参数的简单代码
2017/08/06 Javascript
vue自定义底部导航栏Tabbar的实现代码
2018/09/03 Javascript
实现vuex原理的示例
2020/10/21 Javascript
[01:32]DOTA2次级联赛——首支职业女子战队选拔赛全记录
2014/10/23 DOTA
Swift 3.0在集合类数据结构上的一些新变化总结
2016/07/11 Python
详解用Python处理HTML转义字符的5种方式
2017/12/27 Python
python将字典内容写入json文件的实例代码
2020/08/12 Python
如何真正的了解python装饰器
2020/08/14 Python
印度购买眼镜和太阳镜网站:Coolwinks
2018/09/26 全球购物
杭州联环马网络笔试题面试题
2013/08/04 面试题
销售找工作求职信
2013/12/20 职场文书
国家励志奖学金获奖感言
2014/01/09 职场文书
财务部经理岗位职责
2014/02/03 职场文书
班子四风对照检查材料思想汇报
2014/09/29 职场文书
明确岗位职责
2015/02/14 职场文书
2015年学习部工作总结范文
2015/03/31 职场文书
销售区域经理岗位职责
2015/04/10 职场文书
导游词之蜀山胜景瓦屋山
2019/11/29 职场文书
Python探索生命起源 matplotlib细胞自动机动画演示
2022/04/21 Python