tdesign-miniprogram
tdesign-miniprogram copied to clipboard
Tencent
[calendar] 调用接口对日历的某几天进行文案定义
这个功能解决了什么问题
我觉得这个日历不错，但是比如我想对某几天的日历做标记，比如：8月25日做个上标：纪念日，8月28日做个上标：重要 但是我看例子我没有办法完成这个过程，因为例子中只有在整个初始化过程中就把这些内容通过format定好。我没有办法类似于通过某个按钮之类的，把format调用。
你建议的方案是什么
建议能够提供函数方法之类的，我可以按钮事件调用这个方法，把日历的某几个日期做自定义文案的suffix和prefix
👋 @landhuang，感谢给 TDesign 提出了 issue。 请根据 issue 模版确保背景信息的完善，我们将调查并尽快回复你。
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "Published by a pub.dev verified publisher"){kind=small}
Component({
data: {
format: undefined,
},
lifetimes: {
ready() {
setTimeout(() => {
this.setData({
format: (day) => {
const { date } = day;
const year = date.getFullYear();
const month = date.getMonth() + 1;
const curDate = date.getDate();
day.suffix = '¥60';
if (year === 2022) {
if (month === 2) {
const map = {
1: '初一',
2: '初二',
3: '初三',
14: '情人节',
15: '元宵节',
};
if (curDate in map) {
day.prefix = map[curDate];
day.suffix = '¥100';
day.className = 'is-holiday';
}
}
}
return day;
}
})
}, 1000)
}
},
});
这样呢？
Component({ data: { format: undefined, }, lifetimes: { ready() { setTimeout(() => { this.setData({ format: (day) => { const { date } = day; const year = date.getFullYear(); const month = date.getMonth() + 1; const curDate = date.getDate(); day.suffix = '¥60'; if (year === 2022) { if (month === 2) { const map = { 1: '初一', 2: '初二', 3: '初三', 14: '情人节', 15: '元宵节', }; if (curDate in map) { day.prefix = map[curDate]; day.suffix = '¥100'; day.className = 'is-holiday'; } } } return day; } }) }, 1000) } }, });这样呢？
如图，没有效果，代码如下
Component({
data: {
visible: true,
usePopup: false,
value: new Date(2023, 8, 15).getTime(),
minDate: new Date(2023, 8, 1).getTime(),
maxDate: new Date(2023, 9, 15).getTime(),
format: undefined
},
methods: {
handleCalendar() {
this.setData({ visible: true });
},
handleConfirm(e) {
console.log(e.detail.value);
},
handleButton1() {
console.log('test');
setTimeout(() => {
console.log('test1000');
this.setData({
format: (day) => {
const { date } = day;
const year = date.getFullYear();
const month = date.getMonth() + 1;
const curDate = date.getDate();
day.suffix = '¥60';
if (year === 2023) {
if (month === 9) {
const map = {
1: '初一1',
2: '初二1',
3: '初三1',
14: '情人节1',
15: '元宵节1',
};
if (curDate in map) {
day.prefix = map[curDate];
day.suffix = '¥100';
day.className = 'is-holiday';
}
}
}
return day;
}
})
}, 1000)
},
},
});
终于试出来了，这个可以成功，供参考。
// pages/demo02/demo02.js
Page({
/**
* 页面的初始数据
*/
data: {
visible: true,
usePopup: false,
style: 'border: 2rpx solid rgba(220,220,220,1);border-radius: 12rpx;',
inputValue: '1',
kDates: []
},
test() {
let kDate= parseInt(this.data.inputValue, 10);
let kDates= this.data.kDates;
kDates.push(kDate);
this.setData({format(day) {
const { date } = day;
const curDate = date.getDate();
if( kDates.includes(curDate)) {
day.suffix = '打卡';
} else {
day.prefix = '中秋节';
day.suffix = '¥100';
day.className = 'is-holiday';
}
return day;
}, kDates: kDates})
},
bindChangeDate(e) {
let val = e.detail.value;
console.log(val);
this.setData({
inputValue: val
})
},
test2() {
console.log(this.data.inputValue);
}
})
<view>
<view>
<t-button theme="primary" size="large" variant="outline" bind:tap="test">打卡</t-button>
<t-input placeholder="日期" style="{{style}}" value="{{inputValue}}" bind:change="bindChangeDate" maxcharacter="{{2}}" clearable />
</view>
<view>
<t-calendar
visible="{{visible}}"
use-popup="{{usePopup}}"
value="{{value}}"
minDate="{{minDate}}"
maxDate="{{maxDate}}"
format="{{format}}"
bind:confirm="handleConfirm"
/>
</view>
</view>
问题同样，
wxml文件
<text>这是test页面</text> <t-cell title="{{myName}}" note="{{myDescription}}" arrow bind:tap="handleCalendar"></t-cell> <t-calendar visible="{{visible}}" use-popup="{{usePopup}}" minDate="{{minDate}}" maxDate="{{maxDate}}" value="{{value}}" format="{{format}}" bind:confirm="handleConfirm" />
后台js文件 `import { getBookingOrderList } from "../../utils/bookingApi"; Page({
/**
* 页面的初始数据
*/
data: {
myName: '本人预约',
myDescription: "张三",
orderDateList: [],
usePopup: true,
visible: false,
value: "",
minDate: (new Date()).getTime(),
maxDate: (new Date()).getTime(),
// format(day) {
// console.log("day", day.date.toLocaleDateString(), day.type);
// return day;
// }
},
/**
* 生命周期函数--监听页面加载
*/
async onLoad(options) {
const res = await getBookingOrderList();
if (res.code === 0 && res.data.length > 0) {
const minDt = new Date(res.data[0].bookingDate).getTime();
const maxDt = new Date(res.data[res.data.length - 1].bookingDate).getTime();
this.setData({
orderDateList: res.data,
minDate: minDt,
maxDate: maxDt
})
}
},
handleCalendar() {
// console.log("ol", this.data.orderDateList);
this.setData({
format(day) {
console.log("day", day);
if (day.type !== "disabled") {
console.log("day", day.date.toLocaleDateString());
}
return day;
},
visible: true
})
},
handleConfirm(e) {
console.log(e.detail.value);
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})`
data中的format可以正常执行，但是在方法中是要碰运气，但是90%的时候是不能执行的。
