taro ui 小程序at-calendar日历组件自定义样式+选择范围日历崩溃处理

2024-08-30 07:44
文章标签 程序 自定义 组件 选择 ui 处理 范围 样式 日历 崩溃 calendar taro

本文主要是介绍taro ui 小程序at-calendar日历组件自定义样式+选择范围日历崩溃处理，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

taro ui 日历文档

目录

单选+标记时间：

效果：

template：

data：

methods:

日历--范围选择：

效果：

template：

data：

methods：

日历--间隔多选：利用标记日期实现不连续多选日期

效果：

template：

data：

mothods：

 css：

单选+标记时间：

效果：

template：

<at-calendar class="zs-calendar" :marks="marks" @monthChange="monthChange" @dayClick="selectDate" />

data：

const currentDate = ref(dateFormat(Date.now(), 'YYYY-MM-DD'))
const marks = ref([]) // 日历打点 [{ value: '2024-06-10' }, { value: '2024-06-12' }]// 日历前面会展示上个月的几个日期，在数据查询的时候，可以查询从上个月20号开始到下个月20号，确保展示出来的日期都有数据
const startDate = ref(getSpecialDate(currentDate.value, 1, 0, 20))
const endDate = ref(getSpecialDate(currentDate.value, 0, 1, 20))

methods:

// 日历上点击某个日期
const selectDate = (data) => {currentDate.value = data.value
}// 切换月份时 更新开始日期 结束日期
const monthChange = (date) => {startDate.value = getSpecialDate(date, 1, 0, 20)endDate.value = getSpecialDate(date, 0, 1, 20)
}// 获取前n个月or下n个月的某天
// date 参照日期 2024-06-17，lastMonth前n个月 || nextMonth下n个月，day 20号
// getLastMonthTwentieth('2024-06-17', 1, 0, 20) 获取上个月20号
// getLastMonthTwentieth('2024-06-17', 0, 1, 6) 获取下个月6号
export const getSpecialDate = (date, lastMonth, nextMonth, day) => {const now = new Date(date); // 参照日期const specialDate = nextMonth == 0 ? new Date(now.getFullYear(), now.getMonth() - lastMonth, day) : new Date(now.getFullYear(), now.getMonth() + nextMonth, day);return dateFormat(specialDate, 'YYYY-MM-DD');
}/*** 将时间戳转换为时间日期（如：2021-07-12 10:20:35）*/
export const dateFormat  = (timestamp, format) => {if (String(timestamp).length === 10) {timestamp = timestamp * 1000}let date = new Date(timestamp)let Y = date.getFullYear()let M = date.getMonth() + 1let D = date.getDate()let hour = date.getHours()let min = date.getMinutes()let sec = date.getSeconds()if (format === 'YYYY') {return Y // 2021} else if (format === 'YYYY-MM') { // 2021-07return Y + '-' + (M < 10 ? '0' + M : M)} else if (format === 'YYYY-MM-DD') { // 2021-07-12return Y + '-' + (M < 10 ? '0' + M : M) + '-' + (D < 10 ? '0' + D : D)} else if (format === 'HH:mm:ss') { // 10:20:35return (hour < 10 ? '0' + hour : hour) + ':' + (min < 10 ? '0' + min : min) + ':' + (sec < 10 ? '0' + sec : sec)} else if (format === 'YYYY-MM-DD HH:mm') { // 2021-07-12 10:20return Y + '-' + (M < 10 ? '0' + M : M) + '-' + (D < 10 ? '0' + D : D) + ' ' + (hour < 10 ? '0' + hour : hour) + ':' + (min < 10 ? '0' + min : min)} else if (format === 'YYYY-MM-DD HH:mm:ss') { // 2021-07-12 10:20:35return Y + '-' + (M < 10 ? '0' + M : M) + '-' + (D < 10 ? '0' + D : D) + ' ' + (hour < 10 ? '0' + hour : hour) + ':' + (min < 10 ? '0' + min : min) + ':' + (sec < 10 ? '0' + sec : sec)} else {return '--'}
}

日历--范围选择：

效果：

template：

<at-calendar class="zs-calendar" :min-date="minDate" :marks="marks" :isMultiSelect="true" :currentDate="multiCurrentDate" @monthChange="monthChange" @selectDate="onSelectDate" />

data：

// 多选日历 日期
let multiCurrentDate = ref({ start: dateFormat(Date.now(), 'YYYY-MM-DD') })
// 多选 最小能选择的日期 明天
const minDate = ref(dateFormat(new Date(new Date().getTime() + 24 * 60 * 60 * 1000), 'YYYY-MM-DD'))
// 日历打点 [{ value: '2024-06-10' }, { value: '2024-06-12' }]
const marks = ref()

methods：

// 多选日历 方法
const onSelectDate = (selectedDates) => {// 这块很重要！！不写会崩溃// 点击的开始日期 = 上次的开始日期 or 点击的开始日期 = 上次的结束日期 ==》 重置选择范围if (multiCurrentDate.value.start == selectedDates.value.start || multiCurrentDate.value.end == selectedDates.value.start) {multiCurrentDate.value = { start: selectedDates.value.start }}// 点击的日期 有开始和结束if (selectedDates.value.end) {multiCurrentDate.value = selectedDates.value}// 无结束日期 =》重置dataList 重置if (!selectedDates.value.end) { }
}

日历--间隔多选：利用标记日期实现不连续多选日期

效果：

template：

<at-calendar class="zs-calendar zs-calendar-multi" :currentDate="currentDateMulti" :min-date="minDate" :marks="selectDataList" @dayClick="selectDateMulti" />

data：

// 多选 日历 当前日期
const currentDateMulti = ref(dateFormat(Date.now(), 'YYYY-MM-DD'))
// 多选 不连续 多选 选择的日期 [{ value: '2024-06-10' }, { value: '2024-06-12' }]
const selectDataList = ref([])
// 多选 最小能选择的日期 明天
const minDate = ref(dateFormat(new Date(new Date().getTime() + 24 * 60 * 60 * 1000), 'YYYY-MM-DD'))

mothods：

const selectDateMulti = (data) => {// 先赋值，防止dom不变currentDateMulti.value = data.valueconst list = JSON.parse(JSON.stringify(selectDataList.value))const index = list.findIndex(item => { return item.value == data.value })// 存在且就剩这2个if (list.length == 2 && index > -1) {Taro.showToast({title: '请至少选择2个日期',icon: 'none',duration: 2000})}// 不存在if (index == -1) {list.push({ value: data.value })dataList.value.push(data.value)setTimeout(() => {currentDateMulti.value = data.value}, 10)}// 存在 且剩多个if (list.length > 2 && index > -1) {list.splice(index, 1)dataList.value.splice(index, 1)setTimeout(() => {currentDateMulti.value = list[0].valuecurrentDateMulti.value = list[list.length - 1].value}, 10)}selectDataList.value = JSON.parse(JSON.stringify(list))}

 css：

// @import "./zs-style.scss";
$zs-color-primary:#4264E2;.zs-calendar .at-calendar__controller {justify-content: space-between;padding-left: 32px;padding-right: 32px;
}
.zs-calendar .at-calendar__list.flex {color: #333333;
}
.zs-calendar .at-calendar__list.flex .flex__item-extra .extra-marks .mark {background-color: $zs-color-primary;color: $zs-color-primary;
}
.zs-calendar .at-calendar__list.flex .flex__item--selected .extra-marks .mark {background-color: white;color: white;
}
.zs-calendar .at-calendar__list.flex .flex__item--selected-head.flex__item--selected-tail .flex__item-container {background-color: $zs-color-primary;
}
.zs-calendar .at-calendar__list.flex .flex__item--today {color: $zs-color-primary;
}
.zs-calendar .at-calendar__list.flex .flex__item--selected {color: white;background-color: $zs-color-primary;
}
.zs-calendar .at-calendar__list.flex .flex__item--selected-head.flex__item--selected-tail {background-color: transparent;
}
.zs-calendar .at-calendar__list.flex .flex__item:nth-child(7n).flex__item--now:not(.flex__item--selected) {color: #aaaaaa;
}
.zs-calendar .at-calendar__list.flex .flex__item:nth-child(7n+1).flex__item--now:not(.flex__item--selected) {color: #aaaaaa;
}// 多选样式 -- 浅蓝色背景圆点
.zs-calendar-multi .at-calendar__list.flex .flex__item-extra .extra-marks {bottom: 3px;z-index: -1;
}
.zs-calendar-multi .at-calendar__list.flex .flex__item-extra .extra-marks .mark {background-color: #eef7ff;// color: #eef7ff;color: transparent;// color: azure;width: 70px;height: 70px;
}

这篇关于taro ui 小程序at-calendar日历组件自定义样式+选择范围日历崩溃处理的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1120213。

相关文章

HarmonyOS学习(七)——UI（五）常用布局总结

HarmonyOS学习(七)——UI（五）常用布局总结

自适应布局 1.1、线性布局（LinearLayout） 通过线性容器Row和Column实现线性布局。Column容器内的子组件按照垂直方向排列，Row组件中的子组件按照水平方向排列。 属性说明space通过space参数设置主轴上子组件的间距，达到各子组件在排列上的等间距效果alignItems设置子组件在交叉轴上的对齐方式，且在各类尺寸屏幕上表现一致，其中交叉轴为垂直时，取值为Vert
阅读更多...
JS常用组件收集

JS常用组件收集

收集了一些平时遇到的前端比较优秀的组件，方便以后开发的时候查找！！！ 函数工具： Lodash 页面固定： stickUp、jQuery.Pin 轮播： unslider、swiper 开关: switch 复选框： icheck 气泡： grumble 隐藏元素： Headroom
阅读更多...
如何选择适合孤独症兄妹的学校？

如何选择适合孤独症兄妹的学校？

在探索适合孤独症儿童教育的道路上，每一位家长都面临着前所未有的挑战与抉择。当这份责任落在拥有孤独症兄妹的家庭肩上时，选择一所能够同时满足两个孩子特殊需求的学校，更显得尤为关键。本文将探讨如何为这样的家庭做出明智的选择，并介绍星贝育园自闭症儿童寄宿制学校作为一个值得考虑的选项。 理解孤独症儿童的独特性 孤独症，这一复杂的神经发育障碍，影响着儿童的社交互动、沟通能力以及行为模式。对于拥有孤独症兄
阅读更多...
无人叉车3d激光slam多房间建图定位异常处理方案-墙体画线地图切分方案

无人叉车3d激光slam多房间建图定位异常处理方案-墙体画线地图切分方案

墙体画线地图切分方案 针对问题：墙体两侧特征混淆误匹配，导致建图和定位偏差，表现为过门跳变、外月台走歪等 ·解决思路：预期的根治方案IGICP需要较长时间完成上线，先使用切分地图的工程化方案，即墙体两侧切分为不同地图，在某一侧只使用该侧地图进行定位 方案思路 切分原理：切分地图基于关键帧位置，而非点云。 理论基础：光照是直线的，一帧点云必定只能照射到墙的一侧，无法同时照到两侧实践考虑：关
阅读更多...
【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【课程链接】 AntV G6：深入图形与图形分组、自定义节点、节点动画（下）_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中，应该怎样去计算和绘制图形，如何给一个图形制作不间断的动画，以及在鼠标事件之后产生动画。（有点难，需要好好理解） <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06
阅读更多...
JAVA智听未来一站式有声阅读平台听书系统小程序源码

JAVA智听未来一站式有声阅读平台听书系统小程序源码

智听未来，一站式有声阅读平台听书系统 🌟&nbsp;开篇：遇见未来，从“智听”开始 在这个快节奏的时代，你是否渴望在忙碌的间隙，找到一片属于自己的宁静角落？是否梦想着能随时随地，沉浸在知识的海洋，或是故事的奇幻世界里？今天，就让我带你一起探索“智听未来”——这一站式有声阅读平台听书系统，它正悄悄改变着我们的阅读方式，让未来触手可及！ 📚&nbsp;第一站：海量资源，应有尽有 走进“智听
阅读更多...
如何在页面调用utility bar并传递参数至lwc组件

如何在页面调用utility bar并传递参数至lwc组件

1.在app的utility item中添加lwc组件： 2.调用utility bar api的方式有两种： 方法一，通过lwc调用： import {LightningElement,api ,wire } from 'lwc';import { publish, MessageContext } from 'lightning/messageService';import Ca
阅读更多...
C#实战|大乐透选号器[6]：实现实时显示已选择的红蓝球数量

C#实战|大乐透选号器[6]：实现实时显示已选择的红蓝球数量

哈喽，你好啊，我是雷工。 关于大乐透选号器在前面已经记录了5篇笔记，这是第6篇； 接下来实现实时显示当前选中红球数量，蓝球数量； 以下为练习笔记。 01 效果演示 当选择和取消选择红球或蓝球时，在对应的位置显示实时已选择的红球、蓝球的数量； 02 标签名称 分别设置Label标签名称为：lblRedCount、lblBlueCount
阅读更多...
透彻！驯服大型语言模型（LLMs）的五种方法，及具体方法选择思路

透彻！驯服大型语言模型（LLMs）的五种方法，及具体方法选择思路

引言 随着时间的发展，大型语言模型不再停留在演示阶段而是逐步面向生产系统的应用，随着人们期望的不断增加，目标也发生了巨大的变化。在短短的几个月的时间里，人们对大模型的认识已经从对其zero-shot能力感到惊讶，转变为考虑改进模型质量、提高模型可用性。 「大语言模型(LLMs)其实就是利用高容量的模型架构（例如Transformer）对海量的、多种多样的数据分布进行建模得到，它包含了大量的先验
阅读更多...
【生成模型系列（初级）】嵌入（Embedding）方程——自然语言处理的数学灵魂【通俗理解】

【生成模型系列（初级）】嵌入（Embedding）方程——自然语言处理的数学灵魂【通俗理解】

【通俗理解】嵌入（Embedding）方程——自然语言处理的数学灵魂 关键词提炼 #嵌入方程 #自然语言处理 #词向量 #机器学习 #神经网络 #向量空间模型 #Siri #Google翻译 #AlexNet 第一节：嵌入方程的类比与核心概念【尽可能通俗】 嵌入方程可以被看作是自然语言处理中的“翻译机”，它将文本中的单词或短语转换成计算机能够理解的数学形式，即向量。 正如翻译机将一种语言
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2