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


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 相关文章推荐
js 目录列举函数
Nov 06 Javascript
jquery的ajax请求全面了解
Mar 20 Javascript
解决javascript:window.close()在chrome,Firefox下失效的问题
May 07 Javascript
js实现带圆角的两级导航菜单效果代码
Aug 24 Javascript
Webwork 实现文件上传下载代码详解
Feb 02 Javascript
JS基于clipBoard.js插件实现剪切、复制、粘贴
May 03 Javascript
javascript、php关键字搜索函数的使用方法
May 29 Javascript
微信小程序scroll-x失效的完美解决方法
Jul 18 Javascript
新手入门带你学习JavaScript引擎运行原理
Jun 24 Javascript
简单了解微信小程序的目录结构
Jul 01 Javascript
mock.js模拟数据实现前后端分离
Jul 24 Javascript
详解element-ui中el-select的默认选择项问题
Aug 02 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
header()函数使用说明
2006/11/23 PHP
利用php下载xls文件(自己动手写的)
2014/04/18 PHP
php实现图片等比例缩放代码
2015/07/23 PHP
PHP递归实现层级树状展开
2016/04/01 PHP
PHP与JavaScript针对Cookie的读写、交互操作方法详解
2017/08/07 PHP
PHP中strtr与str_replace函数运行性能简单测试示例
2019/06/22 PHP
在laravel中实现事务回滚的方法
2019/10/10 PHP
JavaScript中关于indexOf的使用方法与问题小结
2010/08/05 Javascript
JQuery设置文本框和密码框得到焦点时的样式
2013/08/30 Javascript
javascript与有限状态机详解
2014/05/08 Javascript
分享12个实用的jQuery代码片段
2016/03/09 Javascript
PassWord输入框代码分享
2016/06/07 Javascript
js css实现垂直方向自适应的三角提示菜单
2016/06/26 Javascript
AngularJS 表达式详解及实例代码
2016/09/14 Javascript
详解webpack-dev-server使用http-proxy解决跨域问题
2018/01/13 Javascript
jQuery幻灯片插件owlcarousel参数说明中文文档
2018/02/27 jQuery
动态加载JavaScript文件的3种方式
2018/05/05 Javascript
微信小程序下拉刷新PullDownRefresh的使用方法
2018/11/29 Javascript
全面分析JavaScript 继承
2019/05/30 Javascript
VUE写一个简单的表格实例
2019/08/06 Javascript
Vue中点击active并第一个默认选中功能的实现
2020/02/24 Javascript
react-intl实现React国际化多语言的方法
2020/09/27 Javascript
JavaScript中arguments的使用方法详解
2020/12/20 Javascript
使用Python生成url短链接的方法
2015/05/04 Python
Python下调用Linux的Shell命令的方法
2018/06/12 Python
Python二维码生成识别实例详解
2019/07/16 Python
Python Multiprocessing多进程 使用tqdm显示进度条的实现
2019/08/13 Python
关于h5中的fetch方法解读(小结)
2017/11/15 HTML / CSS
美国第一大药店连锁机构:Walgreens(沃尔格林)
2019/10/10 全球购物
保送生自荐信范文
2013/10/06 职场文书
毕业生自荐信
2013/12/14 职场文书
材料采购员岗位职责
2013/12/17 职场文书
文明寝室标语
2014/06/13 职场文书
工程索赔意向书
2014/08/30 职场文书
租车协议书范本2014
2014/11/17 职场文书
如何用python清洗文件中的数据
2021/06/18 Python