微信小程序 工作时间段选择 星期几选择

最新推荐文章于 2025-05-12 14:00:34 发布
最新推荐文章于 2025-05-12 14:00:34 发布
阅读量5.7k 收藏 4
点赞数 1
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_39201210/article/details/80653409
本文介绍如何在微信小程序中实现工作时间段选择和星期几选择功能。使用picker和input组件完成时间段选择，利用checkbox和label实现多选的工作日选择。通过处理selectedList来动态设置星期的选中状态。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

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

2.思路： ①时段用picker跟input  如果没有占位字符  则不需要input

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

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

下面为代码：

wxml

最低0.47元/天 解锁文章

200万优质内容无限畅学
qq_39201210
关注
微信小程序时段选择
weixin_44486632的博客
05-24 618
index.wxml <!-- 选择时间段 --> <view class="selectTime flexbox"> <text class="selectTime_title">时段</text> <view class="section"> <picker mode="time" value="{{time}}" start="09:00" en.
uniapp、小程序自定义选择日、周、月、季、年的时间选择器组件
zh626678的博客
01-23 8185
自定义选择日、周、月、季、年的日期选择器组件
微信小程序实现工作时间段选择
10-17
主要为大家详细介绍了微信小程序实现工作时间段选择，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
微信小程序的开发之日期、星期选择功能
这是我的博客
06-15 9788
在公共js内（如utils.js） // 获取d当前时间多少天后的日期和对应星期 function getDates(days) { var todate = getCurrentMonthFirst() var dateArry = []; for (var i = 0; i &lt; days; i++) { var dateObj = dateLater(todate,...
微信小程序单双周选择排序有效果图
最新发布
换日线的博客
05-12 413
单双周快捷选择，最小字数显示
微信小程序 时间插件 (可以选择日期+星期)
fulishafulisha的博客
01-14 4830
1.样式展示 静态展示： 2.代码说明 思路：需要两个数组就可以显示这个东西：第一个数组是包含所有我们要显示的信息，第二个数组是我们所选择下标信息的索引值 如果不理解这句话就看下面的举例： 使用Picker组件(从底部弹起的滚动选择器) 从官方文档可知 我们要从底部弹出一个时间选择器 需要的是多列选择器 那么首先 range传入得是数组型得格式应该是：[[] [] []] ，如range(第一个数组)就应该是dateTimeArray这一个大数组 大数组里面嵌套多少个小数组 那这个时间.
微信小程序组件 - 月日周时分时间选择器
iotjin的专栏
06-16 1178
demo 地址: https://github.com/iotjin/Jh_weapp 效果图： demo代码： js 代码： Page({ /** * 页面的初始数据 */ data: { isShowPopView2:false, currentDateStr1:'', currentDateStr2: '', }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { .
微信小程序-选择时间（一周的某一时刻）
weixin_33717117的博客
12-04 1668
在微信小程序中选取每周的某一天的一个时间段html<view class="picker"> <view class='row_flex be_flex al_flex pad_lr_32 date_tit bg_white '> <view class='row_flex al_flex'> <view cla...
微信小程序当前时间时段选择器插件使用方法详解
10-17
在微信小程序中，时间选择器是一种非常实用的组件，它允许用户方便地选取特定的时间段。本文将深入探讨如何使用微信小程序的当前时间时段选择器插件，包括其基本概念、实现逻辑以及具体代码实现。 首先，我们了解下...
微信小程序 - 日期时间段选择 - picker之日期选择器
小白
04-27 4万+
效果图如下： wxml: &lt;view class="page"&gt; &lt;!-- 时间段 --&gt; &lt;view class="picker_group"&gt; &lt;picker mode="date" value="{{date}}" end="{{date2}}" bind
微信小程序选择开始时间和结束时间组件
wst26311的博客
01-22 1888
微信小程序选择开始时间和结束时间组件
小程序日期时间段日历选择
04-28
小程序时间区间选择
小程序日期+周
qq_43495846的博客
09-06 329
样式展示 由于小程序要做抽奖，要用到时间选择，奈何小程序的时间选择器不能实现就写了一个时间选择器废话不多说上代码 日期处理 // dateWeekPicker.js //用于判断是否在数字前加0 function withData(param){ return param < 10 ? '0' + param : '' + param; } /** * 取时间的小时数 */ function getLoopArray(start,end){ var start = start ||
整理的微信小程序日历（单选/多选/筛选）
weixin_51958960的博客
04-08 2163
【代码】整理的微信小程序日历（单选/多选/筛选）
微信小程序的日期选择器的使用（picker）
weixin_42418774的博客
08-07 4646
首先可以去官方API看看组件： https://developers.weixin.qq.com/miniprogram/dev/component/picker.html 需求：主要页面，点击重复方式，弹出js里面的数据，选择指定日期时，显示第三张图片： 点击加号可以加view框，点击view框就弹出日期选择器：（记得每个框的日期是不一样的哦！） ...
小程序日，周，月，季度，自定义选择器
Frankeen的博客
12-13 3694
应用场景 考虑到某些报表需要根据某天，某周，某月，某季度，或者自定义查询展示；然后每种方式的日期的选择方式各种各样，这里根据我们的需求写了一种针对这些的选择器； 编写日，周，月，季度，自定义tab组件 编写tab组件，组件名tab-cycle tab-cycle.js关键代码，提供tab_datas和cur_tab_id两个属性，tab_datas属性只要是提供给外部重新自定义tab内容，提供了一...
微信小程序（自定义calendar组件）时间选择组件（单选和多选）
m0_46348803的博客
07-25 1057
【代码】微信小程序（自定义calendar组件）时间选择组件（单选和多选）
微信小程序之滚动选择器(时间日期选择器)
热门推荐
Hedong的博客
01-23 5万+
微信小程序自己封装了很多控件，用起来确实很方便，如果这是Android里面，还需要自己去定义，不废话，效果图： 一起来看看怎么实现的呢？看完你应该就该说，尼玛，这就行啦…. 这个效果呢，要用到picker组件，动画从底部弹起的滚动选择器，现支持三种选择器，通过mode来区分，分别是普通选择器，时间选择器，日期选择器，默认是普通选择器。 看下相应的属性： 具体的来看看代码，布局:<view
小程序组件实现周日历功能，课程表、食谱等功能可能会用到的日历简单实现
weixin_40797306的博客
07-30 1万+
前言 四个月前提起兴趣发表的这篇博客，两天劲头就过了，写的也是乱七八糟的，这次想真正的把博客建立起来，第一步要做的事情就是把这篇博客好好的改善一下，给过去一个好的交代，给未来一个好的开始。万事开头难，这次一定坚持下去。 一、功能演示说明 先详细的展示功能图片以及功能说明，以确保大家看到这里能确定功能是否是自己想要的。这是一个可以实现课程表、食谱等一些功能的周日...
微信小程序想要选择日期并显示出来
03-28
好的，我现在需要帮助用户在微信小程序中实现一个日期选择器并显示选中日期的功能。首先，我得回顾用户提供的参考引用，看看有没有相关的组件或者实现方法。 用户提到了引用[1]和引用[2]，其中引用[1]是关于使用...
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值