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

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

效果图

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博客 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/527413.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

AWS入门实践-在EC2上部署Wordpress网站

在AWS EC2上部署WordPress涉及到几个步骤&#xff0c;包括启动EC2实例、配置数据库、安装WordPress等。以下是详细的步骤和相应的命令脚本 第一步: 启动 EC2 实例 登录 AWS 控制台,进入 EC2 服务启动一个新的 EC2 实例,选择 Amazon Linux 2 AMI选择合适的实例类型(例如 t2.mi…

⼿机客户端画K线图流程

优质博文&#xff1a;IT-BLOG-CN 一、什么是K线流程 K线图是一种用于展示金融市场价格走势的图表。它通常由四个关键价格点组成&#xff0c;即开盘价、收盘价、最高价和最低价。K线图的流程可以简单概括为以下几个步骤&#xff1a; 【1】收集数据&#xff1a; 首先&#xff0c…

GPT-4对多模态大模型在多模态预训练、 理解生成上的启发

传统人工智能 模型往往依赖大量有标签数据的监督训练,而且一个模型一般只能解决一个任务,仅适用于单一场景, 这使得人工智能的研发和应用成本高,场景适应能力弱,难以规模化应用。 常见的多模态任务大致可以分为两类: 多模态理解任务,如视频 分类、视觉问答、跨模态检索、指代…

数据库——实验6 视图的创建与使用

1. 视图的定义 视图是根据需要以一个表或多个表为基础&#xff0c;选择满足一定条件的行或列数据的静态定义。它是一种逻辑对象&#xff0c;是一种虚拟表。视图并不生成行或列的永久副本&#xff0c;并不占用存储空 间&#xff0c;也就是说&#xff0c;视图就是保存在数据库中…

LLMs之FreeGPT35:FreeGPT35的简介、安装和使用方法、案例应用之详细攻略

LLMs之FreeGPT35&#xff1a;FreeGPT35的简介、安装和使用方法、案例应用之详细攻略 目录 FreeGPT35的简介 FreeGPT35的安装和使用方法 1、部署和启动服务 Node 2、使用 Docker 部署服务&#xff1a; 运行 Docker 容器以部署服务 使用 Docker Compose 进行更方便的容器化…

TCP/IP协议、HTTP协议和FTP协议等网络协议简介

文章目录 一、常见的网络协议二、TCP/IP协议1、TCP/IP协议模型被划分为四个层次2、TCP/IP五层模型3、TCP/IP七层模型 三、FTP网络协议四、Http网络协议1、Http网络协议简介2、Http网络协议的内容3、HTTP请求协议包组成4、HTTP响应协议包组成 一、常见的网络协议 常见的网络协议…

Docker之数据卷和Dockerfile

目录 一、Docker数据管理 二、数据卷 创建数据卷 查看数据卷 删除数据卷 挂载数据卷 三、数据卷容器 创建数据卷容器 测试数据卷容器 备份数据卷容器 还原数据卷容器 四、Dockerfile 什么是Dockerfile 基本结构 常用指令 快速入门 编写Dockerfile文件 构建镜…

Java-Tomcat

一、web补充技术 ①&#xff1a;B/S架构 主流的方式&#xff0c;只要有浏览器即可。编程方式直接基于socket即可 ②&#xff1a;javascript 简称js&#xff0c;早期只是实现在客户端的浏览器的动态效果&#xff0c;但服务端不会解释运行&#xff0c;所以本质上是静态资源。 …

使用新版FLIR (FLIR_ADAS_v2) 数据集创建yolo格式数据集(目标检测)

FLIR在2022.1.19发布了新版的FLIR_ADAS_v2&#xff0c;有着更多的类别和数量更丰富的图像。数据集同步注释热图像和无注释RGB图像供参考。本文章主要介绍如何使用FLIR_ADAS_v2中的rgb图像和thermal图像来制作yolo格式数据集。 1.官方数据集下载&#xff1a;FLIR_ADAS_v2数据集…

Leetcode 6. Z 字形变换

将一个给定字符串 s 根据给定的行数 numRows &#xff0c;以从上往下、从左到右进行 Z 字形排列。 比如输入字符串为 “PAYPALISHIRING” 行数为 3 时&#xff0c;排列如下&#xff1a; P A H N A P L S I I G Y I R 之后&#xff0c;你的输出需要从左往右逐行读取&#xff0…

【鸿蒙开发】ArkTS和组件

1. 初识ArkTS语言 ArkTS是HarmonyOS优选的主力应用开发语言。ArkTS围绕应用开发在TypeScript生态基础上做了进一步扩展&#xff0c;继承了TS的所有特性。 当前&#xff0c;ArkTS在TS的基础上主要扩展了如下能力&#xff1a; 基本语法&#xff1a;ArkTS定义了声明式UI描述、自…

AI日报:北大Open Sora视频生成更强了;文心一言可以定制你自己的声音;天工 SkyMusic即将免费开放;

&#x1f916;&#x1f4f1;&#x1f4bc;AI应用 北大Open Sora视频生成更强了!时长可达10秒&#xff0c;分辨率更高 【AiBase提要:】 ⭐️ Open-Sora-Plan v1.0.0模型发布 显著提升视频生成质量和文本控制能力 ⭐️ 支持华为昇腾910b芯片&#xff0c;提升运行效率和质量。 ⭐…

智慧安防系统EasyCVR视频汇聚平台接入大华设备无法语音对讲的原因排查与解决

安防视频监控/视频集中存储/云存储/磁盘阵列EasyCVR平台支持7*24小时实时高清视频监控&#xff0c;能同时播放多路监控视频流&#xff0c;视频画面1、4、9、16个可选&#xff0c;支持自定义视频轮播。EasyCVR平台可拓展性强、视频能力灵活、部署轻快&#xff0c;可支持的主流标…

CasaOS玩客云部署AList+Aria2结合内网穿透实现公网离线下载文件至网盘

&#x1f308;个人主页: Aileen_0v0 &#x1f525;热门专栏: 华为鸿蒙系统学习|计算机网络|数据结构与算法 ​&#x1f4ab;个人格言:“没有罗马,那就自己创造罗马~” #mermaid-svg-cdH8fnSF05FmvunX {font-family:"trebuchet ms",verdana,arial,sans-serif;font-siz…

React - 请你说一说setState是同步的还是异步的

难度级别:中高级及以上 提问概率:70% 在React项目中,使用setState可以更新状态数据,而不能直接使用为this.state赋值的方式。而为了避免重复更新state数据,React首先将state添加到状态队列中,此时我们可以通过shouldComponentUpdate这个钩…

AutoDev 1.8 融合 DevOps 规范和实践,构建演进式 AI 辅助编码

在新版本的 AutoDev 中&#xff0c;我们又融入了一系列软件开发的实践&#xff0c;以更好地辅助开发人员的日常工作。这些新的特性&#xff0c;融合了我们对于 AI 辅助编码的新理解。诸如于&#xff1a; 重构&#xff1a;AI 重命名、坏味道重构、重构建议。提交信息优化&#x…

【Python】OPC UA 服务器扫描工具

引言 OPC UA&#xff08;开放平台通信统一架构&#xff09;是一种跨平台的、开放的数据交换标准&#xff0c;广泛用于工业自动化领域。在工业4.0的大背景下&#xff0c;OPC UA服务器在网络中的部署日益增多&#xff0c;如何快速有效地发现这些服务器成为了一个实际需求。本文将…

【opencv】示例-create_mask.cpp 通过鼠标交互产生掩膜图像(黑白图像)

/* * create_mask.cpp * * Author: * Siddharth Kherada <siddharthkherada27[at]gmail[dot]com> * * 这个教程演示了如何制作掩膜图像&#xff08;黑白图像&#xff09;。 * 该程序将输入图像作为源图像&#xff0c;并输出对应的掩膜图像。 */#include "opencv2/im…

【opencv】示例-demhist.cpp 调整图像的亮度和对比度,并在GUI窗口中实时显示调整后的图像以及其直方图。...

#include "opencv2/core/utility.hpp" // 包含OpenCV核心工具库的头文件 #include "opencv2/imgproc.hpp" // 包含OpenCV图像处理的头文件 #include "opencv2/imgcodecs.hpp" // 包含OpenCV图像编码解码的头文件 #include "opencv2/highgui…

3.1_2 内存管理的概念

3.1_2 内存管理的概念 重要考点