0
0

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

taro ui 日历文档

单选+标记时间：

效果：

template：

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

data：

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

methods:

  1. // 日历上点击某个日期
  2. const selectDate = (data) => {
  3.   currentDate.value = data.value
  4. }
  6. // 切换月份时 更新开始日期 结束日期
  7. const monthChange = (date) => {
  8.   startDate.value = getSpecialDate(date, 1, 0, 20)
  9.   endDate.value = getSpecialDate(date, 0, 1, 20)
  10. }
  12. // 获取前n个月or下n个月的某天
  13. // date 参照日期 2024-06-17，lastMonth前n个月 || nextMonth下n个月，day 20号
  14. // getLastMonthTwentieth('2024-06-17', 1, 0, 20) 获取上个月20号
  15. // getLastMonthTwentieth('2024-06-17', 0, 1, 6) 获取下个月6号
  16. export const getSpecialDate = (date, lastMonth, nextMonth, day) => {
  17.     const now = new Date(date); // 参照日期
  18.     const specialDate = nextMonth == 0 ? new Date(now.getFullYear(), now.getMonth() - lastMonth, day) : new Date(now.getFullYear(), now.getMonth() + nextMonth, day);
  19.     return dateFormat(specialDate, 'YYYY-MM-DD');
  20. }
  22. /**
  23.  * 将时间戳转换为时间日期（如：2021-07-12 10:20:35）
  24.  */
  25. export const dateFormat  = (timestamp, format) => {
  26.   if (String(timestamp).length === 10) {
  27.     timestamp = timestamp * 1000
  28.   }
  29.   let date = new Date(timestamp)
  30.   let Y = date.getFullYear()
  31.   let M = date.getMonth() + 1
  32.   let D = date.getDate()
  33.   let hour = date.getHours()
  34.   let min = date.getMinutes()
  35.   let sec = date.getSeconds()
  36.   if (format === 'YYYY') {
  37.     return Y // 2021
  38.   } else if (format === 'YYYY-MM') { // 2021-07
  39.     return Y + '-' + (M < 10 ? '0' + M : M)
  40.   } else if (format === 'YYYY-MM-DD') { // 2021-07-12
  41.     return Y + '-' + (M < 10 ? '0' + M : M) + '-' + (D < 10 ? '0' + D : D)
  42.   } else if (format === 'HH:mm:ss') { // 10:20:35
  43.     return (hour < 10 ? '0' + hour : hour) + ':' + (min < 10 ? '0' + min : min) + ':' + (sec < 10 ? '0' + sec : sec)
  44.   } else if (format === 'YYYY-MM-DD HH:mm') { // 2021-07-12 10:20
  45.     return Y + '-' + (M < 10 ? '0' + M : M) + '-' + (D < 10 ? '0' + D : D) + ' ' + (hour < 10 ? '0' + hour : hour) + ':' + (min < 10 ? '0' + min : min)
  46.   } else if (format === 'YYYY-MM-DD HH:mm:ss') { // 2021-07-12 10:20:35
  47.     return 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)
  48.   } else {
  49.     return '--'
  50.   }
  51. }

日历--范围选择：

效果：

template：

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

data：

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

methods：

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

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

效果：

template：

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

data：

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

mothods：

  1. const selectDateMulti = (data) => {
  2.   // 先赋值，防止dom不变
  3.   currentDateMulti.value = data.value
  4.   const list = JSON.parse(JSON.stringify(selectDataList.value))
  5.   const index = list.findIndex(item => { return item.value == data.value })
  6.   // 存在且就剩这2个
  7.   if (list.length == 2 && index > -1) {
  8.     Taro.showToast({
  9.       title: '请至少选择2个日期',
  10.       icon: 'none',
  11.       duration: 2000
  12.     })
  13.   }
  14.   // 不存在
  15.   if (index == -1) {
  16.     list.push({ value: data.value })
  17.     dataList.value.push(data.value)
  18.     setTimeout(() => {
  19.       currentDateMulti.value = data.value
  20.     }, 10)
  21.   }
  22.   // 存在 且剩多个
  23.   if (list.length > 2 && index > -1) {
  24.     list.splice(index, 1)
  25.     dataList.value.splice(index, 1)
  26.     setTimeout(() => {
  27.       currentDateMulti.value = list[0].value
  28.       currentDateMulti.value = list[list.length - 1].value
  29.     }, 10)
  30.   }
  32.   selectDataList.value = JSON.parse(JSON.stringify(list))
  34. }

css：

  1. // @import "./zs-style.scss";
  2. $zs-color-primary:#4264E2;
  4. .zs-calendar .at-calendar__controller {
  5.     justify-content: space-between;
  6.     padding-left: 32px;
  7.     padding-right: 32px;
  8. }
  9. .zs-calendar .at-calendar__list.flex {
  10.     color: #333333;
  11. }
  12. .zs-calendar .at-calendar__list.flex .flex__item-extra .extra-marks .mark {
  13.     background-color: $zs-color-primary;
  14.     color: $zs-color-primary;
  15. }
  16. .zs-calendar .at-calendar__list.flex .flex__item--selected .extra-marks .mark {
  17.     background-color: white;
  18.     color: white;
  19. }
  20. .zs-calendar .at-calendar__list.flex .flex__item--selected-head.flex__item--selected-tail .flex__item-container {
  21.     background-color: $zs-color-primary;
  22. }
  23. .zs-calendar .at-calendar__list.flex .flex__item--today {
  24.     color: $zs-color-primary;
  25. }
  26. .zs-calendar .at-calendar__list.flex .flex__item--selected {
  27.     color: white;
  28.     background-color: $zs-color-primary;
  29. }
  30. .zs-calendar .at-calendar__list.flex .flex__item--selected-head.flex__item--selected-tail {
  31.     background-color: transparent;
  32. }
  33. .zs-calendar .at-calendar__list.flex .flex__item:nth-child(7n).flex__item--now:not(.flex__item--selected) {
  34.     color: #aaaaaa;
  35. }
  36. .zs-calendar .at-calendar__list.flex .flex__item:nth-child(7n+1).flex__item--now:not(.flex__item--selected) {
  37.     color: #aaaaaa;
  38. }
  40. // 多选样式 -- 浅蓝色背景圆点
  41. .zs-calendar-multi .at-calendar__list.flex .flex__item-extra .extra-marks {
  42.     bottom: 3px;
  43.     z-index: -1;
  44. }
  45. .zs-calendar-multi .at-calendar__list.flex .flex__item-extra .extra-marks .mark {
  46.     background-color: #eef7ff;
  47.     // color: #eef7ff;
  48.     color: transparent;
  49.     // color: azure;
  50.     width: 70px;
  51.     height: 70px;
  52. }
标签： taro 小程序
本文转载自: https://blog.csdn.net/zxt1195229475/article/details/141680354
版权归原作者 二豆是富婆 所有， 如有侵权，请联系我们删除。
登录后发布评论

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

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？