手记

使用原生js实现一个简单的datePicker组件

javascript.png

这篇文章是我看了慕课网的datePicker组件开发课程写的,其中加了一些自己的思考和总结,具体源码大家可以参考慕课网相关代码

1,实现的效果

datepacker.gif

2,基础知识点

JavaScript Date(日期)对象 实例

  • 返回当日的日期和时间

    var today = new Date();
  • 从 Date 对象返回一个月中的某一天 (1 ~ 31)

    today.getDate()
  • 从 Date 对象返回一周中的某一天 (0 ~ 6);注意:星期天是0

    today.getDay()
  • 从 Date 对象以四位数字返回年份

    today.getFullYear()
  • 从 Date 对象返回月份 (0 ~ 11)

    today.getMonth()
  • 返回 Date 对象的小时 (0 ~ 23)

    today.getHours()
  • 返回 Date 对象的分钟 (0 ~ 59)。

    today.getMinutes()
  • 返回 1970 年 1 月 1 日至今的毫秒数。

    today.getTime()
  • 返回某一个日期的Date对象

    // 比如我要拿到5月27号的Date对象var aDay = new Date('2018-05-27')
    或者var aDay = new Date(2018,4,27) // 月份是从0开始的

更多可以参考JavaScript Date 对象;

3,页面结构

这里我们就不细讲了,我们会在第五节讲动态渲染日历数据。

4,获取日历每月显示的数据

首先我们要实现一个函数,这个函数的作用就是拿到我们这个 datePicker 需要渲染的数据。

我们实现的六行七列的数据,如下图:

demo4.png

我们首先创建一个 data.js ,同时在里面定义一个 getMonthDate 的方法,在 ret 存入我们所要渲染的天数。

(function(){    var datepicker = {};
    
    datepicker.getMonthDate = function(year ,month){        
        var ret = [];        return {            days:ret
        };

    }    
    window.datepicker = datepicker;
})();

这个函数需要接受的参数是年份与月份,如果不传的话,则默认传入当前的月份与年份。

如下:

if(!year&&!month){    var today =  new  Date(); // 获取当天日期对象
    year = today.getFullYear(); // 获取当前年份
    month = today.getMonth() + 1; // 获取当前月份}

这里面还有一个比较重要的点就是,就是我们怎么显示上一个月的值,以及他们分别是几号。

demo3.png

这里我们只要获取到这个月第一天是星期几就可以了,然后前面的就是相应显示上个月的值。

var firstDay = new Date(year ,month-1, 1); // 这个月第一天的Date对象var firstDayWeekDay = firstDay.getDay(); // 那个这个月第一天具体是星期几if(firstDayWeekDay === 0)firstDayWeekDay = 7; // 0的话就是星期天year = firstDay.getFullYear(); // 拿到当前的年份month = firstDay.getMonth() + 1; // 拿到当前的月份

我们还需要拿到上个月和这个月的最后一天,便于我们稍后组装数据。我们可以用这个月的第0天得到上个月的最后一天。

var lastDayofLastMonth = new Date(year,month-1,0); // 上个月的最后一天var lastDateofLastMonth = lastDayofLastMonth.getDate(); 
// 上个月的具体日期var preMonthDayCount = firstDayWeekDay-1;  // 上个月在第一行要显示几天var lastDay = new Date(year,month,0); // 这个月的最后一天var lastData = lastDay.getDate();   // 这个月的最后一天具体日期

接下去我们就需要去拼装数据了。

遍历数据:

数据结构的图我刚刚已经发过了,我们这边需要循环遍历这六行七列的42个数据,而且每一个数据包括

{    date : 代表我们时当月的第几天,其实是一个中介,为了计算showDate
    month : 代表我们是第几个月
    showDate : 代表我们当前天数是确切的第几天
}

遍历的代码如下:

for (var i = 0;i<6*7;i++){    var date = i+1-preMonthDayCount; // 赋值date的值,这里上个月的最后一天为0
    var showDate = date; // 赋值showDate,上下月份,下面再做判断
    var thisMonth = month; // 赋值月份
            
    if (date <= 0){             // 当date < 0时,则代表是上一个月
        thisMonth = month-1;    // 月份减一
        showDate = lastDateofLastMonth + date;  // 显示上一个相应是几号
    } else if (date > lastData){  // 当date大于了这个月最后一天,那么代表下个月
        thisMonth = month+1;    // 月份加一
        showDate = showDate - lastData;         // 显示下一个月具体几号
    }                    
    if(thisMonth === 13) thisMonth = 1; 
    // 当我们月份是13的时候,代表下一年,月份置为一
    if(thisMonth === 0)thisMonth = 12;    // 当我们月份是0的时候,代表上一年,月份置为一
    ret.push({        date:date,        month:thisMonth,        showDate:showDate
    });                 // 最后塞入到我们的ret中去}

经过以上代码的处理,我们便能得到最初图中所示的数据了。

5,开始动态渲染数据

我们在建一个 datePicker.js ,我们在这个 js 中做一些页面渲染的工作。

首先我们要来思考一下我们要做一些什么工作,一般在下手开始敲代码之前,我们先要想好思路,然后在开始工作。

demo.png

最开始,我们肯定要获取到日历数据,然后将数据动态填充到我们准备好的模版里面去。

然后我们要实现一些事件,改变月份,然后进行相应的的月份数据;点击相应的天数,使日历组件消失,input框中显示选择的天数。

这样我们可以写一个代码的大致框架出来:

(function(){    var datepicker = window.datepicker;

    datepicker.buildUI = function(year ,month){ // 日历组件的函数
        var html = datepicker.buildUI(year,month);        return html;
    };
    
    datepicker.render = function(direction){ // 页面的render函数
        var year,month;        
        var html = datepicker.buildUI(year,month);
        
        $wrapper = document.querySelector('.ui-datePicker-wrapper');

        $wrapper.innerHTML = html;
        
    }
    
    datepicker.init = function(input){ // 页面的入口函数
        datepicker.render();        
    }    
    function format(date){ // 一个工具函数,将Date对象转化成YYYY-MM-DD的格式
        var ret = '';        var padding =  function(num){            if(num <= 9){                return  '0' + num;
            }else{                return num;
            }
        }
        ret += date.getFullYear() + '-';
        ret += padding(date.getMonth() + 1) + '-';
        ret += padding(date.getDate()); 
        
        return  ret;
    }

})();

然后我们在 init 函数中添加一些事件函数,如下图:

demo4.png

接下来我们主要看看 buildUI 的函数实现,这里其实就是实现一个动态的html,然后渲染到页面中而已,就跟我们平时从 Ajax 渲染数据一样。

demo5.png

最后我们看看index.html的文件内容怎么样,如下图:

index.png

页面引入两个js,并向外暴露一个变量对象 datepicker ,然后调用相应的 init 方法。

6,总结

至此我们便完成了一个简单的用原生js完成的一个最最基础的日历组件,其中里面最主要的就是获取日期数据的这个函数,实现的思路其实也很常规,其他的关于渲染的流程,其实我们平时工作中也会经常碰到。

希望这篇文章对大家学习小程序能有帮助,来自一个奔跑在前端路上的前端小白。



作者:darrell
链接:https://www.jianshu.com/p/e7e7f38cc724

0人推荐
随时随地看视频
慕课网APP