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() + 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:
- <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.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:
- // @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;
- }
复制代码 免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!更多信息从访问主页:qidao123.com:ToB企服之家,中国第一个企服评测及商务社交产业平台。 |