欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

如何給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)文章

  • vue項目main.js使用方法詳細介紹

    vue項目main.js使用方法詳細介紹

    這篇文章主要給大家介紹了關(guān)于vue項目main.js使用方法的相關(guān)資料,main.js文件是程序的入口文件,加載各種公共組件,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
    2023-09-09
  • 詳解Vue3頁面如何自適應表格滾動高度

    詳解Vue3頁面如何自適應表格滾動高度

    這篇文章主要為大家詳細介紹了Vue3頁面如何自適應表格滾動高度,文中的示例代碼講解詳細,具有一定的借鑒價值,感興趣的小伙伴可以跟隨小編一起學習一下
    2024-02-02
  • VUE3中h()函數(shù)和createVNode()函數(shù)的使用解讀

    VUE3中h()函數(shù)和createVNode()函數(shù)的使用解讀

    這篇文章主要介紹了VUE3中h()函數(shù)和createVNode()函數(shù)的使用解讀,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-08-08
  • vue elementUI表格控制顯示隱藏對應列的方法

    vue elementUI表格控制顯示隱藏對應列的方法

    這篇文章主要為大家詳細介紹了vue elementUI表格控制顯示隱藏對應列的方法,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-04-04
  • Vue組件基礎用法詳解

    Vue組件基礎用法詳解

    組件(Component)是Vue.js最強大的功能之一。組件可以擴展HTML元素,封裝可重用的代碼,本文將詳細介紹Vue組件基礎用法
    2020-02-02
  • Vue微信項目按需授權(quán)登錄策略實踐思路詳解

    Vue微信項目按需授權(quán)登錄策略實踐思路詳解

    這篇文章主要介紹了Vue微信項目按需授權(quán)登錄策略實踐思路詳解,本文給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下
    2018-05-05
  • Vue.js原理分析之observer模塊詳解

    Vue.js原理分析之observer模塊詳解

    這篇文章主要介紹了Vue.js中observer模塊的相關(guān)資料,文中通過原理分析介紹還是相對的詳細,相信對大家具有一定的參考價值,需要的朋友們下面來一起看看吧。
    2017-02-02
  • vue.js+element 默認提示中英文操作

    vue.js+element 默認提示中英文操作

    這篇文章主要介紹了vue.js+element 默認提示中英文實例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-11-11
  • 基于Vuejs和Element的注冊插件的編寫方法

    基于Vuejs和Element的注冊插件的編寫方法

    這篇文章主要介紹了基于Vuejs和Element的注冊插件的編寫方法,需要的朋友可以參考下
    2017-07-07
  • 原生javascript中檢查對象是否為空示例實現(xiàn)

    原生javascript中檢查對象是否為空示例實現(xiàn)

    這篇文章主要為大家介紹了原生javascript中檢查對象是否為空示例實現(xiàn),有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2021-11-11

最新評論