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

本文主要是介绍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

相关文章

Springboot处理跨域的实现方式(附Demo)

《Springboot处理跨域的实现方式(附Demo)》:本文主要介绍Springboot处理跨域的实现方式(附Demo),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不... 目录Springboot处理跨域的方式1. 基本知识2. @CrossOrigin3. 全局跨域设置4.

python+opencv处理颜色之将目标颜色转换实例代码

《python+opencv处理颜色之将目标颜色转换实例代码》OpenCV是一个的跨平台计算机视觉库,可以运行在Linux、Windows和MacOS操作系统上,:本文主要介绍python+ope... 目录下面是代码+ 效果 + 解释转HSV: 关于颜色总是要转HSV的掩膜再标注总结 目标:将红色的部分滤

Python实现自动化接收与处理手机验证码

《Python实现自动化接收与处理手机验证码》在移动互联网时代,短信验证码已成为身份验证、账号注册等环节的重要安全手段,本文将介绍如何利用Python实现验证码的自动接收,识别与转发,需要的可以参考下... 目录引言一、准备工作1.1 硬件与软件需求1.2 环境配置二、核心功能实现2.1 短信监听与获取2.

Vue中组件之间传值的六种方式(完整版)

《Vue中组件之间传值的六种方式(完整版)》组件是vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用,针对不同的使用场景,如何选择行之有效的通信方式... 目录前言方法一、props/$emit1.父组件向子组件传值2.子组件向父组件传值(通过事件形式)方

如何自定义Nginx JSON日志格式配置

《如何自定义NginxJSON日志格式配置》Nginx作为最流行的Web服务器之一,其灵活的日志配置能力允许我们根据需求定制日志格式,本文将详细介绍如何配置Nginx以JSON格式记录访问日志,这种... 目录前言为什么选择jsON格式日志?配置步骤详解1. 安装Nginx服务2. 自定义JSON日志格式各

Python使用date模块进行日期处理的终极指南

《Python使用date模块进行日期处理的终极指南》在处理与时间相关的数据时,Python的date模块是开发者最趁手的工具之一,本文将用通俗的语言,结合真实案例,带您掌握date模块的六大核心功能... 目录引言一、date模块的核心功能1.1 日期表示1.2 日期计算1.3 日期比较二、六大常用方法详

利用Go语言开发文件操作工具轻松处理所有文件

《利用Go语言开发文件操作工具轻松处理所有文件》在后端开发中,文件操作是一个非常常见但又容易出错的场景,本文小编要向大家介绍一个强大的Go语言文件操作工具库,它能帮你轻松处理各种文件操作场景... 目录为什么需要这个工具?核心功能详解1. 文件/目录存javascript在性检查2. 批量创建目录3. 文件

Android自定义Scrollbar的两种实现方式

《Android自定义Scrollbar的两种实现方式》本文介绍两种实现自定义滚动条的方法,分别通过ItemDecoration方案和独立View方案实现滚动条定制化,文章通过代码示例讲解的非常详细,... 目录方案一:ItemDecoration实现(推荐用于RecyclerView)实现原理完整代码实现

Java使用多线程处理未知任务数的方案介绍

《Java使用多线程处理未知任务数的方案介绍》这篇文章主要为大家详细介绍了Java如何使用多线程实现处理未知任务数,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 知道任务个数,你可以定义好线程数规则,生成线程数去跑代码说明:1.虚拟线程池:使用 Executors.newVir

一文带你深入了解Python中的GeneratorExit异常处理

《一文带你深入了解Python中的GeneratorExit异常处理》GeneratorExit是Python内置的异常,当生成器或协程被强制关闭时,Python解释器会向其发送这个异常,下面我们来看... 目录GeneratorExit:协程世界的死亡通知书什么是GeneratorExit实际中的问题案例