当前位置: 首页 > news >正文

整理的微信小程序日历(单选/多选/筛选)

一、日历横向多选,支持单日、双日、三日、工作日等选择

效果图

wxml文件

<view class="calendar"><view class="section"><view class="title flex-box"><button bindtap="past">上一页</button><view class="title">{{currentShow}}</view><button bindtap="future">下一页</button></view><view class="week flex-box"><view wx:for="{{week}}" wx:key="{{item}}" class="weekday">{{item}}</view></view><view class="days flex-box"><view wx:for="{{days}}" wx:key="{{item}}" class="day" data-today="{{item.today}}" bindtap="select"><view class="circle {{item.isDisabled?'':'disabled'}}{{item.today == today ? '' : ((item.start||item.end) ? 'sign' : item.sign ? 'signsec' : '')}}"><view>{{item.today == today ? '今天' : item.day}}</view><view>{{item.start ? '起' : ''}}{{item.end ? '止' : ''}}</view></view></view></view></view><view class="selectFl"><view class="selectItem {{selectInd == index ? 'selectItemAct' : ''}}" bindtap="seletap" data-ind="{{index}}" wx:for="{{selectArr}}" wx:key="index">{{item}}</view></view><view class="cut"></view><view class="footer"><view class="footer-title">清除已选</view><view class="footer-content"></view><view class="footer-side flex-box"><view><view class="footer-lf"><text class="color-e">开始时间:</text>{{timeShowS}}</view><view class="footer-lf"><text class="color-e">截止时间:</text>{{timeShowE}}</view></view><view><button class="footer-btn" bindtap="next">确定</button></view></view></view>
</view>

wxss

.flex-box {display: flex;
}.calendar {height: 100%;color: #666;
}.calendar .color-a {color: #78d278;
}.calendar .color-b {color: #ff7977;
}.calendar .color-c {color: #3cb2ef;
}.calendar .color-d {color: #ffdb5c;
}.calendar .color-e {color: #ccc;
}.calendar .color-g {color: #3dc19a;
}.section {padding: 20rpx 30rpx;border-bottom: 1px solid #f2f2f2;background: #fff;
}.title {padding: 20rpx 0;align-items: center;justify-content: space-between;
}.week {padding: 20rpx 0;border-radius: 20rpx 20rpx 0 0;
}.weekday {margin-right: 1%;width: 13.28%;text-align: center;
}.days {padding: 10rpx 0;flex-wrap: wrap;
}.day {position: relative;margin: 0;padding: 0;height: 90rpx;width: 14.28%;text-align: center;border-radius: 10rpx;background: #fff;cursor: pointer;color: #000000;
}.circle {margin: 0 auto;padding-top: 20rpx;box-sizing: border-box;width: 100%;height: 90rpx;font-size: 24rpx;
}.sign {color: #fff;background: #3dc19a;
}.signsec {color: #fff;background: rgb(61,193,154, 0.4);
}.disabled {opacity: 0.5;
}.cut {height: 40rpx;background: #f9f9f9;
}.footer-title {padding: 30rpx;color: red;text-align: center;border-top: 1px solid #f2f2f2;border-bottom: 1px solid #f2f2f2;background: #fff;
}.footer-content {height: 240rpx;background: #f2f2f2;
}.footer-side {align-items: center;justify-content: space-between;padding: 20rpx 30rpx;border-top: 1px solid #f2f2f2;border-bottom: 1px solid #f2f2f2;background: #fff;
}.footer-lf {padding: 6rpx 0;font-size: 24rpx;
}.calendar .footer-btn {padding: 12rpx;width: 180rpx;min-height: auto;font-size: 28rpx;color: #fff;border-radius: 9999rpx;background: #3dc19a;cursor: pointer;
}.detail {background: #fff;
}.detail-title {padding: 20rpx;border-top: 1px solid #f2f2f2;border-bottom: 1px solid #f2f2f2;
}.detail-box {padding: 40rpx 30rpx 0;
}.detail-list {position: relative;padding-bottom: 40rpx;
}.detail-list:after {content: " ";position: absolute;top: 32rpx;bottom: 0;left: 16rpx;width: 1px;border-left: 1px solid #f2f2f2;
}.detail-list:last-child:after {border: none;
}.detail-time {padding-bottom: 20rpx;color: #ccc;font-size: 24rpx;
}.detail-cell {align-items: flex-start;justify-content: space-between;padding-left: 40rpx;line-height: 1.7;
}.detail-img {width: 90rpx;height: 120rpx;cursor: pointer;
}.iconfont {font-family: "iconfont" !important;font-size: 16px;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}.selectFl {display: flex;flex-wrap: wrap;margin-top: 10rpx;
}
.selectItem {width: 180rpx;height: 60rpx;line-height: 60rpx;text-align: center;background: #fff;border-radius: 12rpx;font-size: 27rpx;color: #000000;border: 2rpx solid #E8E8E8;margin-top: 10rpx;
}
.selectItemAct {background: #3dc19a;border: 2rpx solid #3dc19a;color: #FFFFFF;
}

二、纵向日历选择范围

友情地址:https://www.cnblogs.com/yun101/p/12460830.html

三、横向日历单选

 友情地址:微信小程序(日历/日期)选择插件_小程序日历选择范围-CSDN博客

四、微信小程序日历组件(可滑动,可展开收缩,可标点)

友情地址:微信小程序日历组件(可滑动,可展开收缩,可标点)-CSDN博客 

相关文章:

整理的微信小程序日历(单选/多选/筛选)

一、日历横向多选&#xff0c;支持单日、双日、三日、工作日等选择 效果图 wxml文件 <view class"calendar"><view class"section"><view class"title flex-box"><button bindtap"past">上一页</button&…...

Unity 人形骨骼动画模型嘴巴张开

最近搞Daz3D玩&#xff0c;导入后挂上动画模型嘴巴张开&#xff0c;其丑无比。 Google了一下&#xff0c;得知原因是Unity没有对下巴那根骨骼做控制&#xff0c;动画系统就会把它放到默认的位置&#xff0c;嘴巴就张开了。找到了3种解决办法。 1.移除动画中对下巴这个骨骼的转…...

Python爬虫-京东商品评论数据

前言 本文是该专栏的第68篇,后面会持续分享python爬虫干货知识,记得关注。 在本专栏之前,笔者有详细介绍京东滑块验证码的解决方法,感兴趣的同学,可以直接翻阅文章《Python如何解决“京东滑块验证码”(5)》进行查看。 而本文,笔者以京东商品详情页的评论数据为例,通过…...

实况窗助力美团打造鸿蒙原生外卖新体验,用户可实时掌握外卖进展

自2023年华为宣布全新HarmonyOS NEXT蓄势待发&#xff0c;鸿蒙原生应用全面启动以来&#xff0c;已有金融、旅行、社交等多个领域的企业和开发者陆续宣布加入鸿蒙生态。其中&#xff0c;美团作为国内头部的科技零售企业&#xff0c;是首批加入鸿蒙生态的伙伴&#xff0c;其下的…...

Go语言mac环境搭建详解

Go语言mac环境搭建详解见视频&#xff0c;视频下方也有讲解具体的操作步骤。 Golang Mac电脑环境搭建、开发工具Vscode配置 Go语言mac环境搭建步骤如下&#xff1a; 1、下载安装Golang Go官网下载地址&#xff1a;https://golang.org/dl/ Go官方镜像站&#xff08;推荐&…...

房贷还款(C语言)

一、运行结果&#xff1b; 二、源代码&#xff1b; # define _CRT_SECURE_NO_WARNINGS # include <stdio.h> # include <math.h>int main() {//初始化变量值&#xff1b;double m, r 0.01;float d 300000;float p 6000;//运算还款所需月份&#xff1b;m log10…...

系统架构最佳实践 -- 供应链系统架构

供应链系统是现代企业管理中不可或缺的一部分&#xff0c;它涉及到从原材料采购到产品销售的整个生产流程。一个高效的供应链系统可以帮助企业实现成本控制、库存优化和客户满意度提升等目标。在本文中&#xff0c;我们将讨论供应链系统的设计与实践。 一、供应链系统设计 业务…...

SpringCloudAlibaba-整合sentinel(四)

目录地址&#xff1a; SpringCloudAlibaba整合-CSDN博客 这里只关注代码部分&#xff0c;至于sentinel服务UI的实用&#xff0c;后面可以补上 这里做一个改造&#xff1a; 因为sentinel可以和openfeign结合使用&#xff0c;为微服务做熔断降级&#xff1b; 为了方便微服务之间…...

【研发日记】Matlab/Simulink软件优化(一)——动态内存负荷压缩

文章目录 背景介绍 初始代码 优化代码 分析和应用 总结 背景介绍 在一个嵌入式软件开发项目中&#xff0c;有一个使用MATLAB Function编写的算法模块&#xff0c;功能是从一个较大的数组中提取一段数据&#xff0c;然后求均值输出&#xff0c;示例如下&#xff1a; 初始代…...

python使用Flask框架开发API

Flask是一个基于Python的轻量级Web应用程序框架。 安装依赖库 pip install flask pip install werkzeug 上传接口 Python from flask import Flask, request from werkzeug.utils import secure_filenameapp Flask(__name__)app.route(/upload, methods[POST]) def uploa…...

使用hexo+gitee从零搭建个人博客

一、环境准备 1.Node.js&#xff1a;下载 | Node.js 中文网 (nodejs.cn) &#xff0c;Hexo 是基于Node.js 的博客框架 教程&#xff1a;https://blog.csdn.net/weixin_52799373/article/details/123840137 node -v npm -v 安装 Node.js 淘宝镜像加速器 &#xff08;cnpm&am…...

绝地求生:杜卡迪来了,这些摩托车技巧不学一下吗?

摩托车在远古版本和现在完全不一样&#xff0c;虽然容易翻车造就了一批玩家“摩托杀手”的外号&#xff0c;但是速度可比今天快多了。 后来在蓝洞的削弱了其加速度&#xff0c;虽然资料上写着最高时速155km/h&#xff0c;但是平时游戏中一般只能拉到110~120km/h。这里写一点摩托…...

openstack安装dashboard后登录网页显示404错误

1. 2.进入该目录vim /etc/httpd/conf.d/openstack-dashboard.conf 增加这一行 WSGIApplicationGroup %{GLOBAL} 重启httpd后就可以访问了...

c# Xml 和 Json 转换方法记录

c# xml 转 json 在C#中&#xff0c;可以使用下面几种方法将XML转换为JSON&#xff1a; 使用Newtonsoft.Json库&#xff1a; using Newtonsoft.Json; using Newtonsoft.Json.Converters; using Newtonsoft.Json.Linq; using System.Xml;// 从XML字符串转换为JSON字符串 string …...

OpenHarmony南向开发案例:【智能垃圾桶】

样例简介 智能垃圾桶可以通过数字管家应用来监测垃圾桶当前可用容量&#xff0c;提醒主人及时处理垃圾&#xff1b;通过日程管家可以实现和其他智能设备联动。 核心组件位置功能距离传感器置于垃圾桶盖内侧感应垃圾量红外传感器置于垃圾桶前端感应是否有人靠近光敏电阻开发板…...

每日一题---OJ题: 旋转数组

片头 嗨! 小伙伴们,咱们又见面啦,今天我们一起来学习一道OJ题---旋转数组 emmm,看上去好像没有那么难,我们一起来分析分析 比如: 数组里面有7个元素,分别为 1, 2, 3, 4, 5, 6, 7 , 现在我们将数组中的元素向右轮转3个位置 第一次轮转:将最后一个元素"7"放在第一个…...

基于单链表的通讯录C语言实现

关于单链表的详细了解请见博主的另一篇博客&#xff0c;本文旨在对单链表进行应用&#xff0c;采用C语言编写。 http://t.csdnimg.cn/iBpFa 一、驱动层 1.1 SList.h #pragma once#include<stdio.h> #include<stdlib.h> #include<assert.h> #include"…...

【深度学习】YOLO-World: Real-Time Open-Vocabulary Object Detection,目标检测

介绍一个酷炫的目标检测方式&#xff1a; 论文&#xff1a;https://arxiv.org/abs/2401.17270 代码&#xff1a;https://github.com/AILab-CVC/YOLO-World 文章目录 摘要Introduction第2章 相关工作2.1 传统目标检测2.2 开放词汇目标检测 第3章 方法3.1 预训练公式&#xff1a…...

debian安装和基本使用

&#x1f407;明明跟你说过&#xff1a;个人主页 &#x1f3c5;个人专栏&#xff1a;《Kubernetes航线图&#xff1a;从船长到K8s掌舵者》 &#x1f3c5; &#x1f516;行路有良友&#xff0c;便是天堂&#x1f516; 目录 一、引言 1、Debian系统简介 2、Debian与其他Lin…...

nvm安装详细教程(安装nvm、node、npm、cnpm、yarn及环境变量配置)

一、安装nvm 1. 下载nvm 点击 网盘下载 进行下载 2、双击下载好的 nvm-1.1.12-setup.zip 文件 3.双击 nvm-setup.exe 开始安装 4. 选择我接受&#xff0c;然后点击next 5.选择nvm安装路径&#xff0c;路径名称不要有空格&#xff0c;然后点击next 6.node.js安装路径&#…...

地震勘探——干扰波识别、井中地震时距曲线特点

目录 干扰波识别反射波地震勘探的干扰波 井中地震时距曲线特点 干扰波识别 有效波&#xff1a;可以用来解决所提出的地质任务的波&#xff1b;干扰波&#xff1a;所有妨碍辨认、追踪有效波的其他波。 地震勘探中&#xff0c;有效波和干扰波是相对的。例如&#xff0c;在反射波…...

Lombok 的 @Data 注解失效,未生成 getter/setter 方法引发的HTTP 406 错误

HTTP 状态码 406 (Not Acceptable) 和 500 (Internal Server Error) 是两类完全不同的错误&#xff0c;它们的含义、原因和解决方法都有显著区别。以下是详细对比&#xff1a; 1. HTTP 406 (Not Acceptable) 含义&#xff1a; 客户端请求的内容类型与服务器支持的内容类型不匹…...

Leetcode 3576. Transform Array to All Equal Elements

Leetcode 3576. Transform Array to All Equal Elements 1. 解题思路2. 代码实现 题目链接&#xff1a;3576. Transform Array to All Equal Elements 1. 解题思路 这一题思路上就是分别考察一下是否能将其转化为全1或者全-1数组即可。 至于每一种情况是否可以达到&#xf…...

【力扣数据库知识手册笔记】索引

索引 索引的优缺点 优点1. 通过创建唯一性索引&#xff0c;可以保证数据库表中每一行数据的唯一性。2. 可以加快数据的检索速度&#xff08;创建索引的主要原因&#xff09;。3. 可以加速表和表之间的连接&#xff0c;实现数据的参考完整性。4. 可以在查询过程中&#xff0c;…...

《Playwright:微软的自动化测试工具详解》

Playwright 简介:声明内容来自网络&#xff0c;将内容拼接整理出来的文档 Playwright 是微软开发的自动化测试工具&#xff0c;支持 Chrome、Firefox、Safari 等主流浏览器&#xff0c;提供多语言 API&#xff08;Python、JavaScript、Java、.NET&#xff09;。它的特点包括&a…...

【磁盘】每天掌握一个Linux命令 - iostat

目录 【磁盘】每天掌握一个Linux命令 - iostat工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景 注意事项 【磁盘】每天掌握一个Linux命令 - iostat 工具概述 iostat&#xff08;I/O Statistics&#xff09;是Linux系统下用于监视系统输入输出设备和CPU使…...

DIY|Mac 搭建 ESP-IDF 开发环境及编译小智 AI

前一阵子在百度 AI 开发者大会上&#xff0c;看到基于小智 AI DIY 玩具的演示&#xff0c;感觉有点意思&#xff0c;想着自己也来试试。 如果只是想烧录现成的固件&#xff0c;乐鑫官方除了提供了 Windows 版本的 Flash 下载工具 之外&#xff0c;还提供了基于网页版的 ESP LA…...

【单片机期末】单片机系统设计

主要内容&#xff1a;系统状态机&#xff0c;系统时基&#xff0c;系统需求分析&#xff0c;系统构建&#xff0c;系统状态流图 一、题目要求 二、绘制系统状态流图 题目&#xff1a;根据上述描述绘制系统状态流图&#xff0c;注明状态转移条件及方向。 三、利用定时器产生时…...

JDK 17 新特性

#JDK 17 新特性 /**************** 文本块 *****************/ python/scala中早就支持&#xff0c;不稀奇 String json “”" { “name”: “Java”, “version”: 17 } “”"; /**************** Switch 语句 -> 表达式 *****************/ 挺好的&#xff…...

html-<abbr> 缩写或首字母缩略词

定义与作用 <abbr> 标签用于表示缩写或首字母缩略词&#xff0c;它可以帮助用户更好地理解缩写的含义&#xff0c;尤其是对于那些不熟悉该缩写的用户。 title 属性的内容提供了缩写的详细说明。当用户将鼠标悬停在缩写上时&#xff0c;会显示一个提示框。 示例&#x…...