vue自定义可选时间的日历组件

本文实例为大家分享了vue自定义可选时间日历组件的具体代码,供大家参考,具体内容如下

日历功能:

1、过去时间不可选择
2、可自定义不可选时间
3、本月默认展示当天,其他月展示第一天,若为不可选时间,往后顺延

效果图:

-------下面开始表演-----------

**首先,画出日历页面布局,参照win10系统日历布局*6行7列,为何如此,请自行理解…*本人也是“偷窥”来的

beginDay是当前月第一天的周几,prevMdays是上个月总天数,nowMdays是当月总天数,这样就实现了日历的展示效果,标签中绑入一些可能会用到的数据 data-dates等

<div class="dateContent-body-day" v-for="item in 42" :key="item">
            <div
              v-if="item - beginDay > 0 && item - beginDay <= nowMdays"
              :class="{
                'active-day': `${year}/${month}/${item - beginDay}` == curDate
              }"
              @click="dayHandler"
              :data-year="year"
              :data-month="month"
              :data-day="item - beginDay"
              :data-dates="year + '/' + month + '/' + (item - beginDay)"
            >
              {{ item - beginDay }}
            </div>
            <div class="other-day" v-else-if="item - beginDay <= 0">
              {{ item - beginDay + prevMdays }}
    </div>
  <div class="other-day" v-else>{{ item - beginDay - nowMdays }}</div>
</div>

—接下来…

所用到的数据:

*active-day是高亮的那一天即选中日期,curDate控制选中哪一天,这里默认当天,开放一个props数据timeArry,允许传入一些自定义日期作为不可选,点击的日期中绑定的dates存在于数组中则返回,可选择的情况下通过$emit将选择的结果通过chooseDate事件暴露出去。

//点击切换日
 dayHandler(e) {
      console.log(e);
      var daNum = e.target.dataset;
      if (this.cantTime.indexOf(daNum.dates) > -1) {
        this.$toast("非开放日期,不可选取");
        return;
      }
      if (
        `${daNum.year}/${daNum.month}/${daNum.day}` >=
        `${new Date().getFullYear()}/${new Date().getMonth() +
          1}/${new Date().getDate()}`
      ) {
        this.date = e.target.dataset.day;
        this.$emit(
          "chooseDate",
          this.year + "/" + this.month + "/" + this.date
        );
      } else {
        this.$toast("过去时间不可选取");
      }
    },
    //切换下月
``nextMonth() {
      if (this.month == 12) {
        this.month = 1;
        this.year++;
      } else {
        this.month++;
      }
},

对切换月、日都要进行观测,重点在于观测月份变化,也不知道watch有没有被滥用

```javascript
watch: {
    date(val, oldval) {
      if (val) {
        this.curDate = `${this.year}/${this.month}/${this.date}`;
      }
    },
    month(val, oldval) {
      if (val) {
        var ndate;
        for (var i = 1; i <= 31; i++) {
          console.log(`${this.year}/${this.month}/${i}`);
          if (this.cantTime.indexOf(`${this.year}/${this.month}/${i}`) < 0) {
            console.log("不存在数值,停止,日期停留在" + i);
            ndate = i;
            break;
          }
        }
        console.log(ndate, `${this.year}/${this.month}/${ndate}`);
        //用切换到的月和本日相比较,未来月默认选中1号,当月选中当天
        if (
          `${this.year}/${this.month}/1` >
          `${new Date().getFullYear()}/${new Date().getMonth() +
            1}/${new Date().getDate()}`
        ) {
          this.curDate = `${this.year}/${this.month}/${ndate}`;
          this.date = ndate;
        } else {
          for (var i = new Date().getDate(); i <= 31; i++) {
            console.log(2`${this.year}/${this.month}/${i}`);
            if (this.cantTime.indexOf(`${this.year}/${this.month}/${i}`) < 0) {
              this.curDate = `${new Date().getFullYear()}/${new Date().getMonth() +
            1}/${i}`;
          this.date = i;
              break;
            }
          }
        }
        this.$emit(
          "chooseDate",
          this.year + "/" + this.month + "/" + this.date
        );
      }
    }
  },

父组件中调用

<calendar :timeArry="timeArray" @chooseDate="chooseHandler"></calendar>
import { calendar ,alertBox} from '@/components/index.js';
export default {
    components:{calendar,alertBox
    },

这样的日历就完成了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • VUE实现日历组件功能

    哈哈, 就在昨天笔者刚刚在Github 上发布了一个基于VUE的日历组件.过去做日历都是需要引用 jquery moment 引用 fullCalendar.js 的.几者加起来体积庞大不说,也并不是很好使用在vue这种数据驱动的项目里.所以笔者经过一周的拍脑袋,做了一个十分简陋的版本. 简介 目前只支持月视图,该组件是 .vue 文件的形式.所以,大家在使用的时候 是需要node的咯~~~ 安装 npm install vue-fullcalendar DEMO 针对这个组件, 本人做了一个十

  • vue实现一个炫酷的日历组件

    公司业务新开了一个商家管理微信H5移动端项目,日历控件是商家管理员查看通过日程来筛选获取某日用户的订单等数据. 如图: 假设今天为2018-09-02 90天前: 90天后; 产品需求: 展示当前日期(服务器时间)前后90天,一共181天的日期. 日历可以左右滑动切换月份. 当月份的如果不在181天区间的,需要置灰并且不可点击. 点击日历绑定的节点的外部,关闭弹窗. 涉及内容: 获取服务器时间,渲染日历数据 vue-touch监听手势滑动事件 ios日期兼容处理 clickOutSide自定义指

  • 基于Vue2-Calendar改进的日历组件(含中文使用说明)

    一,前言 我是刚学Vue的菜鸟,在使用过程中需要用到日历控件,由于项目中原来是用jQuery写的,因此用了bootstarp的日历控件,但是配合Vue实在有点蛋疼,不够优雅-- 于是网上搜了好久找到了Vue2-Calendar,不用说,挺好用的,但是同时也发现这个组件有些问题,有些功能挺不符合我们的要求,于是着手改了一版 二,改进的功能 在Vue2-Calendar v2.2.4 版基础上作了优化. 1.改进原控件无法切换语言的BUG,支持 lang='zh-CN'和'en'. 2.日历面板增加

  • vue自定义可选时间的日历组件

    本文实例为大家分享了vue自定义可选时间日历组件的具体代码,供大家参考,具体内容如下 日历功能: 1.过去时间不可选择 2.可自定义不可选时间 3.本月默认展示当天,其他月展示第一天,若为不可选时间,往后顺延 效果图: -------下面开始表演----------- **首先,画出日历页面布局,参照win10系统日历布局*6行7列,为何如此,请自行理解-*本人也是"偷窥"来的 beginDay是当前月第一天的周几,prevMdays是上个月总天数,nowMdays是当月总天数,这样就

  • vue实现垂直无限滑动日历组件

    用vue做了一个垂直无限滑动日历,在这里记录一下实现. 效果 组件 verticalCalendar.vue <template>   <div ref="container" class="calendar-vt">     <div class="top-month">{{ currentMonth }}月</div>     <ul ref="scroll" clas

  • vue自定义开发滑动图片验证组件

    纯前端,通过canvas来自定义开发滑动图片验证,反过来也能完成纯滑动验证. <template>   <div class="verification" ref="verification">     <!-- 画布部分 -->     <canvas ref="slideVerify" class="slide-img"></canvas>     <div

  • vue中使用element日历组件的示例代码

    先看下效果图: 完整代码附上 <template> <div class="newSeeds" id="famerCalendar"> <div class="title-bottom"> <el-date-picker :clearable="false" prefix-icon="timeFilter" v-model="value2" ty

  • vue自定义全局组件(自定义插件)的用法

    有时候我们在做开发的时候,就想自己写一个插件然后就可以使用自己的插件,那种成就感很强.博主最近研究element-ui和axios的时候,发现他们是自定义组件,但是唯一有一点不同的是,在用element-ui的时候是使用Vue.use()语句来使用的,而axios的时候,不用Vue.use(),只要import就可以导入进来了,感觉很神奇,细细的发现,原来他们的不同是因为axios里面并没有写install方法,而element-ui就有写这个方法,下面就利用这个install来写一个自己的插件

  • 使用form-create动态生成vue自定义组件和嵌套表单组件

    使用form-create动态生成vue自定义组件和嵌套表单组件 [github]| [说明文档] maker.create 通过建立一个虚拟 DOM的方式生成自定义组件 生成 Maker let rule = [ formCreate.maker.create('i-button').props({ type:'primary', field:'btn' loading:true }) ] $f = formCreate.create(rule); 上面的代码是通过maker生成器动态生成一个

  • 使用Vue 自定义文件选择器组件的实例代码

    本文 GitHub  https://github.com/qq44924588... 上已经收录,更多往期高赞文章的分类,也整理了很多我的文档,和教程资料.欢迎Star和完善,大家面试可以参照考点复习,希望我们一起有点东西. 文件选择元素是web上最难看的 input 类型之一.它们在每个浏览器中实现的方式不同,而且通常非常难看.这里有一个解决办法,就是把它封装成一个组件. 安装 如果你尚未设置项目,可以使用 vue-cli 的 webpack-simple 模板启动一个新项目. $ npm

  • Vue自定义组件使用事件修饰符的踩坑记录

    前言 今天在使用自写组件时,突然遇到久违的冒泡事件,就想着使用Vue自带的事件修饰符(.stop),本以为可以就此解决冒泡,却遇到这个问题. 脑中一片问号????这是什么鬼,我是按照Vue文档写的啊(吐血) 于是,我开始踏上了解决错误的路程 程序员常规操作: 打开浏览器–百度/谷歌搜一搜,发现搜出来的东西不少,没一个是能解决我的问题的答案,没办法Vue文档走起!!!! 看了至少几十遍Vue文档的我,自以为没有看漏什么东西,确信Vue文档也没有解决这种问题的答案,苦苦寻找,来到这里 嗯?这个eve

随机推荐