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

taro ui 日历文档

目录

单选+标记时间:

效果:

template:

data:

methods:

日历--范围选择:

效果:

template:

data:

methods:

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

效果:

template:

data:

mothods:

css:



单选+标记时间:

效果:

template:

html 复制代码
<at-calendar class="zs-calendar" :marks="marks" @monthChange="monthChange" @dayClick="selectDate" />

data:

javascript 复制代码
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:

javascript 复制代码
// 日历上点击某个日期
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() + 1
  let 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-07
    return Y + '-' + (M < 10 ? '0' + M : M)
  } else if (format === 'YYYY-MM-DD') { // 2021-07-12
    return Y + '-' + (M < 10 ? '0' + M : M) + '-' + (D < 10 ? '0' + D : D)
  } else if (format === 'HH:mm:ss') { // 10:20:35
    return (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:20
    return 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:35
    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)
  } else {
    return '--'
  }
}

日历--范围选择:

效果:

template:

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

data:

javascript 复制代码
// 多选日历 日期
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:

javascript 复制代码
// 多选日历 方法
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:

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

data:

javascript 复制代码
// 多选 日历 当前日期
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:

javascript 复制代码
const selectDateMulti = (data) => {
  // 先赋值,防止dom不变
  currentDateMulti.value = data.value
  const 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].value
      currentDateMulti.value = list[list.length - 1].value
    }, 10)
  }

  selectDataList.value = JSON.parse(JSON.stringify(list))

}

css:

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;
}
相关推荐
Bessie2342 小时前
微信小程序eval无法使用的替代方案
微信小程序·小程序·uni-app
蜕变菜鸟2 小时前
小程序跳转另一个小程序
小程序
5 小时前
躺平成长-代码开发,利用kimi开发小程序(09)
小程序
8 小时前
微信小程序运营日记(第四天)
微信小程序·小程序
guanpinkeji9 小时前
旧衣回收小程序:提高回收效率,扩大服务范围
大数据·小程序·团队开发·软件开发·小程序开发·旧衣回收·旧衣回收小程序
说私域10 小时前
完美日记营销模式对开源 AI 智能名片 2 + 1 链动模式 S2B2C 商城小程序的启示
人工智能·小程序
说私域10 小时前
传统媒体终端移动化发展新趋势:融合开源 AI 智能名片与 S2B2C 商城小程序的创新探索
人工智能·小程序·零售
DK七七10 小时前
当今陪玩系统小程序趋势,陪玩系统源码搭建后的适用于哪些平台
小程序·php·uniapp
少恭写代码11 小时前
duxapp放弃了redux,在duxapp中局部、全局状态的实现方案
react native·taro·redux·duxapp
程序员入门进阶13 小时前
基于微信的追星小程序+ssm(lw+演示+源码+运行)
微信·小程序