[calendar] 调用接口对日历的某几天进行文案定义

[landhuang]

这个功能解决了什么问题

我觉得这个日历不错，但是比如我想对某几天的日历做标记，比如：8月25日做个上标：纪念日，8月28日做个上标：重要
但是我看例子我没有办法完成这个过程，因为例子中只有在整个初始化过程中就把这些内容通过format定好。我没有办法类似于通过某个按钮之类的，把format调用。

你建议的方案是什么

建议能够提供函数方法之类的，我可以按钮事件调用这个方法，把日历的某几个日期做自定义文案的suffix和prefix

[github-actions]

👋 @landhuang，感谢给 TDesign 提出了 issue。
请根据 issue 模版确保背景信息的完善，我们将调查并尽快回复你。

[LeeJim]

我来处理下

[landhuang]

我来处理下

感谢，有人回应就是惊喜！~期待最终效果。

[zack-2000]

我来处理下

有进展了吗， 希望通过接口返回的数据来设置日期的禁用状态

[LeeJim]

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)
    }
  },

});

这样呢？

[landhuang]

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)
      },
    },
  });
  

[landhuang]

@LeeJim 加不加setTimeout 都是没有作用的

[landhuang]

终于试出来了，这个可以成功，供参考。

// 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>

[succeed318]

问题同样，

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%的时候是不能执行的。

[succeed318]

[succeed318]