Vue初探-日期选择器

MAX_zuo 发布于2019-08-22 10:47 / 3001人阅读

摘要：之前用用面向对象的方法实现过日期选择器，最近在练习，现在用实现一遍。需求设定实现一个日期选择器，默认显示，高亮显示。能够点击上一月下一月进行日期跳转。实现日期选择有两个比较关键的方法获取当月天数，以便循环遍历多少天。

之前用jquery用面向对象的方法实现过日期选择器，最近在练习vue，现在用vue实现一遍。发现vue用数据驱动的方式来实现，感觉还不错。

需求设定

1.实现一个日期选择器，默认显示，today高亮显示。
2.能够点击上一月、下一月进行日期跳转。
3.点击某一天能够拿到日期

思路分析

之前用jquery实现的时候可能会考虑将dom封装到js中，在js中拼接html字符串，在页面调用的地方直接引用。考虑到vue可以进行组件式开发，日期组件完全可以多带带提取出一个vue文件，所以这里直接将dom写在html中，开发时可写在template里。

实现日期选择有两个比较关键的方法：1.获取当月天数，以便循环遍历多少天。2.获取当月第一天是星期几，以便确定第一天显示在哪里。

在编写组件时，我们选择维护三个变量nowYear,nowMonth,nowDate,即vue实例上挂在的当前年、月、日。

在进行数据初始化，也可以看做组件初始化显示时，首先为这三个变量附初值

var date = new Date();
this.nowYear = date.getFullYear();
this.nowMonth = date.getMonth();
this.nowDate = date.getDate();

然后，将传统方法中的init函数，也就是原来的dom拼接函数，在这里仅仅操作一个数组，即维护一个数组days,存储需要显示的当月日期数据。

同样我们利用vue体统的@click可以很方便的绑定事件，然后进行days的更新。当days更新时，vue的watcher就会发现并告诉dom更新，利用Vm.$nextTick方法，执行回调函数。即

this.$nextTick(() => {
  this.nowDate();
  this.init();
})

效果演示

目前只实现到需求设定的程度，于实际应用可能稍有差距，可以理解下思路，使用时自行实现

demo:(http://fehey.com/Vue-items/vu...
源码：github源码

博客：(http://fehey.com/)欢迎前端小伙伴交流指正~

云服务器 GPU云服务器 asp日期选择器日期连续选择日期选择控件日期选择库

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/91253.html

vue初探--编写表格组件

摘要：容器里面包含部分，其一为提供过滤器的入口其二为表格组件。数据绑定，简写形式为在父组件和子组件的通讯中，必须要在子组件里面声明。如果是编写则必须是注册组件的语法糖。下次还是上动图吧以后基本上碰到这种使用表格呈现数据的组件。在项目当中，经常会有表格组件，包含2部分，其一为table-header,其二为table-content 然后在这个小demo里面涉及到了vue的个别指令: v-f...

dabai 2019-08-19 17:12 评论0 收藏0
gulp和webpack初探

摘要：首先声明一下，和两者关系不大，主要是团队之前一直用构建工具，这几天业务上比较清闲，老大让我学学新的和这些潮流工具，于是草草研究了一天，记一些笔记。最后使用将各个组件打包在一起。首先声明一下，gulp和webpack两者关系不大，主要是团队之前一直用grunt构建工具，这几天业务上比较清闲，老大让我学学新的gulp和webpack这些潮流工具，于是草草研究了一天，记一些笔记。 gulp...

jhhfft 2019-08-19 18:40 评论0 收藏0
初探vue-cli 3.0

摘要：当你将一系列的特性选择完毕后最后回提示你是否将已选项保存成一个快速将来可复用的当你选择保存时，被保存的将会存在用户的目录下一个名为的文件里。准备工作 npm install -g @vue/cli or yarn global add @vue/cli 安装需要Node.js8.9以上版本，安装完成后可以通过vue --version来验证是否安装成功项目创建 vue create...

superPershing 2019-08-23 12:23 评论0 收藏0
vue 手写一个时间选择器

摘要：实现代码于文章末尾处构思页面结构组件由输入框和日历面板组成，写好页面主体结构。输入框点击显示或隐藏日历面板方法改变布尔值控制日历面板的显示隐藏。同时，当组件销毁时，也要及时清除该监听器。最近研究了 DatePicker 的实现原理后做了一个 vue 的 DatePicker 组件，今天带大家一步一步实现 DatePicker 的 vue 组件。原理 DatePicker 的原理是—...

sf_wangchong 2019-08-23 11:54 评论0 收藏0
开发中遇到的问题总结

摘要：获取字符串中出现次数最多的字符。去掉字符串中的所有空格中对象数组按对象属性排序 VUE 1、vue——解决You may use special comments to disable some warnings. Use // eslint-disable-next-line to ignore the next line. Use / eslint-disable / to ign...

wenshi11019 2019-08-23 16:03 评论0 收藏0