首页 > 其他分享 >vant移动端日历组件如何设置后端传过来的日期才可选

vant移动端日历组件如何设置后端传过来的日期才可选

时间:2022-12-20 15:01:06浏览次数:41  
标签:return vant 日历 month var 日期 传过来 date day

 1 <template>
 2   <div id="homeBox">
 3     <van-cell title="选择多个日期" @click="show = true" />
 4     <van-calendar
 5       v-model="show"
 6       :formatter="formatter"
 7       :min-date="minDate"
 8       :max-date="maxDate"
 9       @confirm="onConfirm"
10     />
11   </div>
12 </template>
13 <script>
14 export default {
15   data() {
16     return {
17       show: false,
18       minDate: new Date(2010, 0, 1), //可选最早时间
19       maxDate: new Date()
20     };
21   },
22   mounted() {
23     this.getDateList();
24   },
25   methods: {
26     //这边主要处理不可选日期的禁选变灰
27     formatter(day) {
28       // console.log(this.$store.state.datelist);
29       var now = new Date(day.date);
30       var year = now.getFullYear(); //得到年份
31       var month = now.getMonth(); //得到月份
32       var date = now.getDate(); //得到日期
33       month = month + 1;
34       if (month < 10) month = '0' + month;
35       if (date < 10) date = '0' + date;
36       var time = year + '-' + month + '-' + date; //(格式化"yyyy-MM-dd")
38       if (this.$store.state.datelist.includes(time)) {
39         // return time;
40         // console.log(day.date);
41       } else { 
42         day.type = 'disabled';
43       }
44       return day
45     },
46 
47     //格式化日期
48     formatDate(date) {
49       console.log(date);
50       return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
51     },
52 
53     //点击确认按钮获取所选日期
54     onConfirm(date) {
55       console.log(this.formatDate(date));
56       this.show = false;
57     }, 
58 
59     // 获取可选时间
60     getDateList() {
61       let that = this;
62       that.$axios.get('可选日期的接口').then((res) => {
63         const list_date = res.data.ResultData;
64         that..datelist = [...list_date];
65       });
66     }
67   }
68 };
69 </script>

标签:return,vant,日历,month,var,日期,传过来,date,day
From: https://www.cnblogs.com/chenzhengyang/p/16994191.html

相关文章

  • Android自定义日历源码收集
    概述以前在一家OA公司的时候,做的第一个项目便是日程模块,当时由于对OA理解的偏差,写了很多无用的代码和逻辑,也走了很多的弯路。几年过去了,现在回想起来还历历在目,今天给大家......
  • 直播软件app开发,vant 时间选择控件修订为只显示年份
    直播软件app开发,vant时间选择控件修订为只显示年份 import_extendsfrom"@babel/runtime/helpers/esm/extends";import{createNamespace}from'../utils';import......
  • vue中关于prop传值传过来的很可能是字符串
    如果是数字参与计算的话最好转一下数字再进行运算比如<Pagination:pageNo="searchParams.pageNo":pageSize="searchParams.pageSize":total="total"continues="5"@g......
  • Java后端获取前端传过来header中的值
    Java后端获取前端传过来header中的值比如获取前端传值token值:方法一:不需要在参数中写HttpServletRequestrequestServletRequestAttributesattributes=(ServletRequ......
  • 基于Android平台的个人日历的设计与开发
    摘要个人日历是基于Android平台开发的,运行在Android手机平台的个人日程管理软件。本文是对基于Android平台的个人日历的设计与开发。首先,本文介绍了软件开发的背景与特点。......
  • vue+vant移动端制作一个可添加的form提交表单
    <template><van-nav-bartitle="填写参会人员信息"left-text="返回"left-arrow@click-left="onClickLeft"/><!--添加参会人员信息-->......
  • 2022DDL日历
    2022年DDL日历 今年只剩下12月哩,好快,就这样又是一年......12月星期一星期二星期三星期四星期五星期六星期天   1234       567......
  • vue封装移动端日历选择和前后日期切换功能组件
    整体效果1.main.js文件引入element-ui(需要用install指令安装,这里不贴出来了)2.新建组件文件<template><divid="app"><divclass="choose-day-week-month-year-all">......
  • 纯javascript的一个日历选择器
    是javscript搞的,比较简单,不依然其他语言,而且可以看到代码,所以推荐之,我试过了,可以正确运行。可打开​​​http://www.airticket.com.cn/JumpLink/hexun.aspx?25632​​​......
  • #yyds干货盘点# 歌谣学前端之react笔记之学习日历样式的设置
    前言我是歌谣我有个兄弟巅峰的时候排名c站总榜19叫前端小歌谣曾经我花了三年的时间创作了他现在我要用五年的时间超越他今天又是接近兄弟的一天人生难免坎坷大不了从......