vant的Calendar日历组件添加备注

2024-07-10 02:24| 来源: 网络整理| 查看: 265

先引入Calendar组件哦可以查看vant官方 https://youzan.github.io/vant/#/zh-CN/calendar

最近做的一个项目有用到日历需要自定义日期文案

poppable设置为false，代表日历会直接平铺展示在页面中，不是以弹层的形式出现

show-confirm设置为false，代表是不显示日历的确定按钮，用户点击任意日期就立即触发confirm事件

min-date最小日期段

max-date最大日期段

formatter自定义日期文案我用来给每个日期添加备注

className 额外类名

export default { name: 'DoctorData', data() { return { // 医生id doctorId: '', // 姓名信息 doctorInfo: {}, // 所点击的时间 timeValue: '', // 医生排班预约次数和day值 curNums: [], // 最小时间值当前时间 minDate: new Date() } }, created() { // 接受上一层传来的数据 this.doctorId = this.$route.params.doctorId this.doctorInfo = this.$route.params.doctorInfo // 获取医生排版日期预约次数 this.getDoctorData() }, methods: { // 获取医生排版日期预约次数 async getDoctorData() { // 发送请求获取后台数据 const data = await this.$http.get(`doctorScheduleDataJson?id=${this.doctorId}&openId=123213`) if (data.status !== 200) { return this.$Toast.fail('获取医生排版预约次数失败') } // 取出剩余次数和day的值 let b = [] for (let a in data.data) { console.log(data.data[a].day) console.log(data.data[a].cur_num) b = { key: data.data[a].day, value: data.data[a].cur_num } this.curNums.push(b) } console.log(this.curNums); // 打印的格式 [0:{key:14,value:57},1:{key:15,value:57},2:{key:16,value:0}] }, // 日期添加备注 formatter(day) { // 当前月份的日 var date = day.date.getDate() for (let i = 0; i < this.curNums.length; i++) { // 当前点击的日相同 if (date == this.curNums[i].key) { // 判断预约次数是否为0 if (this.curNums[i].value == 0) { // 日期添加备注 day.topInfo = '已约满' } else { // 日期添加备注 day.topInfo = '可预约' } } } return day }, // 点击任意日期 confirmFn(data) { console.log(data); this.timeValue = this.timeFormat(data) for (let i = 0; i < this.curNums.length; i++) { // 如果当前点击的日相同 if (this.timeValue == this.curNums[i].key) { // 当前日期的预约次数为0 提示用户并不可跳转 if (this.curNums[i].value == 0) { return this.$Toast.fail('当前日期已约满') } this.$router.push({ name: 'Registration', params: { data: data } }) } } }, // 时间格式化 2019-09-08 timeFormat(time) { let year = time.getFullYear() let month = time.getMonth() + 1 let day = time.getDate() return day }, }, computed: { // 最大日期为当前时间日期+预约时间段 maxDate() { let curDate = new Date().getTime() // 后台返回的预约天数(7) - 1 因为不减一会多出一天预约天数为7 页面会显示8天 let one = (this.doctorInfo.bookDayNum - 1) * 24 * 3600 * 1000 let oneYear = curDate + one return new Date(oneYear) } } } // 日历备注 .van-calendar__top-info { background: linear-gradient(86deg, rgba(212, 165, 116, 0.98), rgba(238, 202, 163, 0.98)); }

效果图：

【本文地址】

公司简介

联系我们