Skip to content

wanlixi/vue-calendar-selector

Repository files navigation

vue-calendar-selector

2017/11/18 Create By Wanlixin

基于vue2.0开发的一个移动端的日历选择器

效果图如下

实现思路 :假设获取某月为30天,怎么将这30天的每一天和周几精准对上呢?我首先想的就是float,依次排开,但是问题是每月1号从第几格子开始排放呢? 幸好原生提供了两个API: new Date(xxxx,xx,xx).getDate(): 可以获取指定月一共有几天; new Data(xxxx,xx,xx).getDay(): 可以获取指定日期是周几 (注意:默认是0-6),


附:其实这里还有一个坑,我在网上查到API都是类似这样写的:new Date(year + '-' + month + '-' + day).getDay(),我起初就是这样通过传入字符串获取周几的,浏览器自动的模拟器ios和android系统都没有问题,然后在IOS真机手机上跑就出问题了,10月,11月,12月都没有问题,唯独1-9月是没有办法显示出来的,而且android真机上一点问题都没有,也许聪明的你已经想到传入new Date("2017-9-01") 和 new Date("2017-09-01") 肯定不一样。


具体实现如下:

首先,日期控制栏布局采用的不是从周1到周日,而是从周日开始排起,这也正好和下面获取上个月剩余几天完全吻合不用进一步处理 默认采用 5行布局,为什么就不用解释了吧,也许聪明的你又已经想到给new Date()传入(xxxx,xx, 1)获取某月的1号是周几 就可以知道每一个月的开始是从哪里排版了,对的,此时另外又出来一个问题,即:假设某月1号是从周3开始排版,并且某月正好有 30天,那么默认正好35个格子,前面三个格子和和后面的两个格子怎么计算呢?这里我巧用vue的v-for在主(当前月)dom的 前后各插入一个和主dom一样的v-for 循环代码,如下 其中下一个月比较好计算些,直接计算出35格子剩余的格子数量进行循环即可,这时候上个月怎么去循环呢,因为它是倒叙的,例如像29,30,31这样,这个时候就没有办法循环了?不可能的,我是这样写的见我附带的第二张图片,其他的都是些自定义的东西,例如加一些手势交互,展示的一些css效果,这个大家可以自己DIY。分享就到这里了,喜欢的话请给我star一下,谢谢!

=====================================2017-11-21==================================

1.修复了IOS下,选择1~9月时对应的视图不更新

2.修复了左右滑动触发上下月视图的手势精准度

3.修复了选择到2018-04月时,视图的第三个循环li的报错:key="index" 冲突

4.新增了当前选择日的UI和后台已预约的日期的UI展现

5.新增模拟后台数据(mockjs)“绘入”

Releases

No releases published

Packages

No packages published

Languages