05月12, 2017

datePicker最最简单的雏形

其实很久之前,就想写一个日历控件。因为团队中一直在用bootstrap的,去年做了一套Dui(只实现了弹窗、Tip、部分的select),基本就没有日历组件。然后今年就上react的ant-design了。

想想那会儿,团队成员告知我这个日历组件实现比较麻烦,然后也没怎么想法了,说白了还是自己懒。

闲话不扯了,来看一下mac下的日期:

mac-datePicker

界面我就不实现了,我就简单实现一个数字输出那一块。

先说行数,最短的是4排(2月份28天,恰好第一天就是第一行的第一格),最长的是6排,有时候也会有5排。像bootstrap的处理是有几排就输出几排,因为大多数情况下是5排。而antd的设计是统一6排,可能考虑到美观吧(切换的时候,不至于忽高忽低的)。

所以我们就假设6排,这样也方便实现一些。在极端情况下,第一天就是第一行的第一格,那么输出就是1-42了。

显然当i到某个值时,显示的日期需要处理一下(因为一个月不可能有32天+啊)。所以需要算出当前月的最后一天,然后用i去减最后一天 就行了。

比如当前月最后一天是30,那么当i变成31的时候,显示的日期就是1(下个月),当i变成32的时候,显示的日期就是2(下个月)。

上面是考虑了极端情况(第一天就是第一行的第一格),显然一般情况下,是不可能的。所以我们需要知道第一天在第一行的第几格,然后推算出前面有几个空格。

前面有几个空格,决定了for循环的起始点。比如说前面有一个空格,那就是从0到41。有两个空格,就是从-1到40。依此类推。

同理,i为0或者小于0的时候,也要处理一下。这时候需要求得上个月的最后一天,然后加一下就行了。


    var year = 2017, month = 5;

    // 当前传入 2017/5
    var firstDay = new Date(year, month - 1, 1).getDay(); // 获取这个月第一天的星期

    var lastMonthDate = new Date(year, month - 1, 0).getDate(); // 获取上个月最后一天的日期

    var currentMonthDate = new Date(year, month, 0).getDate(); // 获取这个月最后一天的日期

    var prevDays = firstDay;

    var arr = [];

    // 放6排,总共6*7 = 42,找到第一排的第一个。
    // 由于第1列显示周日,所以就更简单了。因为周日代表0,0前面是0个,周1前面是1个,周2前面是2个,周3前面是3个,依次类推
    // 随后只要循环就行了,假设firstDay就是第一格,那极端情况下,是从1遍历到42,现在需要减去1号前上个月占的空间
    for(var i = 1 - prevDays; i < 6*7 + 1 - prevDays; i++) {
        var showDay;
        if( i <= 0 ){
            showDay = lastMonthDate + i;
        } else if ( i > currentMonthDate ) {
            showDay = i - currentMonthDate;
        } else {
            showDay = i;
        }
        arr.push({
            day: i,
            showDay: showDay
        });
    }

    console.log(arr);

    // 显然日历上显示32或者-1是不合适的,所以我们还需要一个值,叫showDay,这个showDay通过上个月的最后一天和这个月的最后一天来计算。

为什么需要day和showDay两个参数?

因为day是用来计算点击的时候,显示年和月的。只有showDay,没办法处理。

有了这个arr数组之后,那么简单的雏形也就可以出来了。下面的就不再展开了。。

本文链接:www.my-fe.pub/post/simple-datePicker-prototype.html

-- EOF --

Comments

评论加载中...

注:如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理。