如何給vant的Calendar日歷組件添加備注
更新時間:2022年04月25日 16:57:12 作者:行行吶
這篇文章主要介紹了如何給vant的Calendar日歷組件添加備注,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
給vant的Calendar日歷組件添加備注
先引入Calendar組件哦 可以查看vant官方 https://youzan.github.io/vant/#/zh-CN/calendar
最近做的一個項目有用到日歷 需要自定義日期文案
poppable
設置為false,代表日歷會直接平鋪展示在頁面中 ,不是以彈層的形式出現(xiàn)show-confirm
設置為false, 代表是不顯示日歷的確定按鈕,用戶點擊任意日期就立即觸發(fā)confirm事件min-date
最小日期段max-date
最大日期段formatter
自定義日期文案 我用來給每個日期添加備注className
額外類名
<!-- 日期表格 --> <van-calendar ? title="日歷" ? :poppable="false" ? :show-confirm="false" ? :style="{ height: '10.666667rem' }" ? :min-date="minDate" ? :max-date="maxDate" ? @confirm="confirmFn" ? :formatter="formatter" ? :className="'van-calendar__top-info'" />
export default { ? name: 'DoctorData', ? data() { ? ? return { ? ? ? // 醫(yī)生id ? ? ? doctorId: '', ? ? ? // 姓名信息 ? ? ? doctorInfo: {}, ? ? ? // 所點擊的時間 ? ? ? timeValue: '', ? ? ? // 醫(yī)生排班預約次數(shù)和day值 ? ? ? curNums: [], ? ? ? // 最小時間值 ?當前時間 ? ? ? minDate: new Date() ? ? } ? }, ? created() { ? ? // 接受上一層傳來的數(shù)據(jù) ? ? ? this.doctorId = this.$route.params.doctorId ? ? this.doctorInfo = this.$route.params.doctorInfo ? ? ? // ?獲取醫(yī)生排版日期預約次數(shù) ? ? this.getDoctorData() ? }, ? methods: { ? ? // 獲取醫(yī)生排版日期預約次數(shù) ? ? async getDoctorData() { ? ? ? // 發(fā)送請求獲取后臺數(shù)據(jù) ? ? ? const data = await this.$http.get(`doctorScheduleDataJson?id=${this.doctorId}&openId=123213`) ? ? ? ? if (data.status !== 200) { ? ? ? ? return this.$Toast.fail('獲取醫(yī)生排版預約次數(shù)失敗') ? ? ? } ? ? ? ? // ?取出剩余次數(shù)和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) { ? ? ? ? ? ? // 判斷預約次數(shù)是否為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) { ? ? ? ? ? ? // 當前日期的預約次數(shù)為0 ?提示用戶并不可跳轉(zhuǎn) ? ? ? ? ? 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() ? ? ? // 后臺返回的預約天數(shù)(7) - 1 ? 因為不減一 會多出一天 預約天數(shù)為7 頁面會顯示8天? ? ? ? let one = (this.doctorInfo.bookDayNum - 1) * 24 * 3600 * 1000 ? ? ? let oneYear = curDate + one ? ? ? return new Date(oneYear) ? ? } ? } }
<style lang="less" scoped> // 日歷備注 .van-calendar__top-info { ? background: linear-gradient(86deg, rgba(212, 165, 116, 0.98), rgba(238, 202, 163, 0.98)); } </style>
效果圖:
橫向的vant組件的日歷
vant的日歷組建只支持縱向變化,不支持橫向,就稍微改變了一下
<template> ? ? <div class="calendar-wrap" style="positon:relative"> ? ? ? ? <div class="month-year">{{showYear}}年{{showMonth+1}}月</div> ? ? ? ? <van-icon class="arrow" @click="deMonth" name="arrow" /> ? ? ? ? <van-icon class="arrow-left" @click="adMonth" name="arrow-left" /> ? ? ? ? <van-icon class="arrow-year" @click="deYear" name="arrow" /> ? ? ? ? <van-icon class="arrow-year-1" @click="deYear" name="arrow" /> ? ? ? ? <van-icon class="arrow-left-year-1" @click="adYear" name="arrow-left" /> ? ? ? ? <van-icon class="arrow-left-year" @click="adYear" name="arrow-left" /> ? ? ? ? <van-calendar class="calendar" ref="calendar" ? ? ? ? ? ? color="#399f0e" ? ? ? ? ? ? row-height="40" :min-date="minDate"? ? ? ? ? ? ? :max-date="maxDate" :default-date="nowDay"? ? ? ? ? ? ? :poppable="false" ? ? :show-subtitle="false" ? ? ? ? ? ? :show-title="false" :show-mark="false"? ? ? ? ? ? ? :show-confirm="false" :formatter="formatterDay" @select="slecetDay" ? ? ? ? > ? ? ? ? <template ?#bottom-info="item" > ? ? ? ? <span class="mark-green" v-if="item.bottomInfo==1"></span> ? ? ? ? <span class="mark-red" v-if="item.bottomInfo==2"></span> ? ? ? ? </template> ? ? ? ? </van-calendar> ? ? </div> </template>
<script> export default { ? ? data(){ ? ? ? ? return{ ? ? ? ? ? ? minDate: new Date(), ? ? ? ? ? ? maxDate: new Date(), ? ? ? ? ? ? defaultDate: new Date(), ? ? ? ? ? ? monthCont: 0, ? ? ? ? ? ? yearCont:0, ? ? ? ? ? ? year: new Date().getFullYear(), ? ? ? ? ? ? month: new Date().getMonth(), ? ? ? ? ? ? nowDay:new Date(), ? ? ? ? ? ? showYear: ? ?new Date().getFullYear(), ? ? ? ? ? ? showMonth:new Date().getMonth(), ? ? ? ? } ? ? } ? ? watch:{ ? ? ? ? defaultDate(val) { ? ? ? ? ? ? this.setMinMaxDay(); ? ? ? ? } ? ? }, ? ? methods:{ ? ? ? ? formatterDay(day){ ? ? ? ? ? ? return day; ? ? ? ? }, ? ? ? ? slecetDay(day){ ? ? ? ? ? ?? ? ? ? ? }, ? ? ? ? // 當前月上一個月 ? ? ? ? deMonth() { ? ? ? ? ? ? this.monthCont--; ? ? ? ? ? ? this.defaultDate = new Date( ? ? ? ? ? ? ? ? this.year, ? ? ? ? ? ? ? ? this.month + this.monthCont, ? ? ? ? ? ? ? ? 1 ? ? ? ? ? ? ); ? ? ? ? }, ? ? ? ? // 當前月下一個月 ? ? ? ? adMonth() { ? ? ? ? ? ? this.monthCont++; ? ? ? ? ? ? this.defaultDate = new Date( ? ? ? ? ? ? ? ? this.year, ? ? ? ? ? ? ? ? this.month + this.monthCont, ? ? ? ? ? ? ? ? 1 ? ? ? ? ? ? ); ? ? ? ? }, ? ? ? ? // 當前年上一個年 ? ? ? ? deYear() { ? ? ? ? ? ? this.yearCont--; ? ? ? ? ? ? this.defaultDate = new Date( ? ? ? ? ? ? ? ? this.year+ this.yearCont, ? ? ? ? ? ? ? ? this.month, ? ? ? ? ? ? ? ? 1 ? ? ? ? ? ? ); ? ? ? ? ? }, ? ? ? ? // 當前年下一個年 ? ? ? ? adYear() { ? ? ? ? ? ? this.yearCont++; ? ? ? ? ? ? this.defaultDate = new Date( ? ? ? ? ? ? ? ? this.year+ this.yearCont, ? ? ? ? ? ? ? ? this.month , ? ? ? ? ? ? ? ? 1 ? ? ? ? ? ? ); ? ? ? ? }, ? ? ? ? setMinMaxDay(){ ? ? ? ? ? ? this.showYear= this.defaultDate.getFullYear(); ? ? ? ? ? ? this.showMonth = this.defaultDate.getMonth(); ? ? ? ? ? ? var firstDay = new Date(this.defaultDate); ? ? ? ? ? ? firstDay.setDate(1) ? ? ? ? ? ? var endDay = new Date(this.showYear,this.showMonth+1,1); ? ? ? ? ? ? this.minDate =new Date( ? ? ? ? ? ? ? ? this.showYear, ? ? ? ? ? ? ? ? this.showMonth, ? ? ? ? ? ? ? ? firstDay.getDate() ? ? ? ? ? ? ) ? ? ? ? ? ? endDay.setDate(0) ? ? ? ? ? ? this.maxDate =new Date( ? ? ? ? ? ? ? ? this.showYear, ? ? ? ? ? ? ? ? this.showMonth, ? ? ? ? ? ? ? ? endDay.getDate() ? ? ? ? ? ? ) ? ? ? ? } ? ? } } </script>
<style scoped lang='scss'> .calendar-wrap::v-deep{ ?? ?width: 100%; ?? ?position: relative; ?? ?.van-calendar__month-title{ ?? ??? ?display: none; ?? ?} ?? ?.mark-red{ ?? ??? ?display: block; ?? ??? ?width: 5px; ?? ??? ?height: 5px; ?? ??? ?background-color: #d46b08; ?? ??? ?border-radius: 50%; ?? ??? ?margin: 0 auto; ? ? } ?? ?.mark-green{ ?? ??? ?display: block; ?? ??? ?width: 5px; ?? ??? ?height: 5px; ?? ??? ?background-color: #389e0d; ?? ??? ?border-radius: 50%; ?? ??? ?margin: 0 auto; ?? ?} ?? ?.month-year{ ?? ??? ?padding: 10px 0; ?? ??? ?text-align: center; ?? ??? ?font-size: 14px; ?? ?} ?? ?.arrow{ ?? ??? ?position: absolute; ?? ??? ?top: 15px; ?? ??? ?right: 10px; ?? ?} ?? ?.arrow-left{ ?? ??? ?position: absolute; ?? ??? ?top: 15px; ?? ??? ?left: 10px; ?? ?} ?? ?.arrow-year{ ?? ??? ?position: absolute; ?? ??? ?top: 15px; ?? ??? ?right: 30px; ?? ?} ?? ?.arrow-left-year{ ?? ??? ?position: absolute; ?? ??? ?top: 15px; ?? ??? ?left: 30px; ?? ?} ?? ?.arrow-year-1{ ?? ??? ?position: absolute; ?? ??? ?top: 15px; ?? ??? ?right: 35px; ?? ?} ?? ?.arrow-left-year-1{ ?? ??? ?position: absolute; ?? ??? ?top: 15px; ?? ??? ?left: 35px; ?? ?} } </style>
vant icon沒找到雙箭頭就用2個單箭頭組合一下
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
VUE3中h()函數(shù)和createVNode()函數(shù)的使用解讀
這篇文章主要介紹了VUE3中h()函數(shù)和createVNode()函數(shù)的使用解讀,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-08-08原生javascript中檢查對象是否為空示例實現(xiàn)
這篇文章主要為大家介紹了原生javascript中檢查對象是否為空示例實現(xiàn),有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2021-11-11