datepicker插件封装

fork me on github

datepicker插件的封装，不依赖任何第三方库，纯原生js编写。

目录结构

|datepicker
|—-|css
|——-datepicker.css
|—-|js
|——-datepicker.js
|——-main.js
|—–index.html

代码

index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
/**
 * 先把html结构搭起来
 * index.html
 */
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="white" />
    <meta name="apple-mobile-web-app-title" content="">
    <meta name="format-detection" content="telephone=no, email=no" />
    <title>date picker</title>
    <link rel="stylesheet" href="css/datepicker.css">
    <style>
    .datepicker {
        border: 1px solid #ccc;
        border-radius: 4px;
        padding: 5px;
        height: 24px;
        line-height: 24px;
        width: 230px;
    }
    
    .datepicker:focus {
        outline: 0 none;
        border: 1px solid #1abc9c;
    }
    </style>
</head>
<body>
    <input type="text" class="datepicker">
    <script src="js/datepicker.js"></script>
    <script src="js/main.js"></script>
    <script>
    //    var monthData = datepicker.getMonthData(2016, 12);
    //    console.log(JSON.stringify(monthData))
    datepicker.init('.datepicker');
    </script>
</body>
</html>

datepicker.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
/**
 * 再把样式写好
 * 注意命名规则
 * datepicker.css
 */
.ui-datepicker-wrapper {
    width: 240px;
    font-size: 16px;
    color: #666;
    box-shadow: 2px 2px 8px 2px rgba(128, 128, 128, 0.3);
    display: none;
    position: absolute;
}
.ui-datepicker-wrapper-show{
    display: block;
}
.ui-datepicker-wrapper .ui-datepicker-header {
    padding: 0 20px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    backgroud: #f0f0f0;
    border-bottom: 1px solid #ccc;
    font-weight: bold;
}
.ui-datepicker-wrapper .ui-datepicker-btn {
    font-family: serif;
    font-size: 20px;
    width: 20px;
    height: 50px;
    line-height: 50px;
    color: #1abc9c;
    text-align: center;
    cursor: pointer;
    text-decoration: none;
}
.ui-datepicker-wrapper .ui-datepicker-prev-btn {
    float: left;
}
.ui-datepicker-wrapper .ui-datepicker-next-btn {
    float: right;
}
.ui-datepicker-wrapper .ui-datepicker-body table {
    width: 100%;
    border-collapse: collapse;
}
.ui-datepicker-wrapper .ui-datepicker-body th,
.ui-datepicker-wrapper .ui-datepicker-body td {
    height: 30px;
    text-align: center;
}
.ui-datepicker-wrapper .ui-datepicker-body th {
    font-size: 12px;
    height: 40px;
    line-height: 40px;
}
.ui-datepicker-wrapper .ui-datepicker-body td {
    border: 1px solid #f0f0f0;
    font-size: 10px;
    cursor: pointer;
}

datepicker.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
/**
 * 封装组件逻辑
 * datepicker.js
 */
(function() {
    var datepicker = {};
    datepicker.getMonthData = function(year, month) {
        var ret = [];
        if (!year || !month) {
            var today = new Date();
            year = today.getFullYear();
            month = today.getMonth() + 1;
        }
        var firstDay = new Date(year, month - 1, 1);
        var firstDayWeekDay = firstDay.getDay();
        if (firstDayWeekDay == 0) {
            firstDayWeekDay = 7;
        }
        year = firstDay.getFullYear();
        month = firstDay.getMonth() + 1;
        var lastDayOfLastMonth = new Date(year, month - 1, 0);
        var lastDateOfLastMonth = lastDayOfLastMonth.getDate();
        var preMonthDayCount = firstDayWeekDay - 1;
        var lastDay = new Date(year, month, 0);
        var lastDate = lastDay.getDate();
        for (var i = 0; i < 7 * 6; i++) {
            var date = i + 1 - preMonthDayCount;
            var showDate = date;
            var thisMonth = month;
            //上一月
            if (date <= 0) {
                thisMonth = month - 1;
                showDate = lastDateOfLastMonth + date;
            } else if (date > lastDate) {
                //下一月
                thisMonth = month + 1;
                showDate = showDate - lastDate;
            }
            if (thisMonth === 0) {
                thisMonth = 12;
            }
            if (thisMonth === 13) {
                thisMonth = 1;
            }
            ret.push({
                month: thisMonth,
                date: date,
                showDate: showDate
            });
        }
        return {
            year: year,
            month: month,
            days: ret
        };
    };
    window.datepicker = datepicker;
})();

main.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
/**
 * main.js
 */
(function () {
    var datepicker = window.datepicker;
    var monthData,$wrapper;
    datepicker.buildUI = function (year, month) {
        monthData = datepicker.getMonthData(year, month);
        var html = '<div class="ui-datepicker-header"><a href="#" class="ui-datepicker-btn ui-datepicker-prev-btn">&lt;</a><a href="#" class="ui-datepicker-btn ui-datepicker-next-btn">&gt;</a><span class="ui-datepicker-curr-month">' + monthData.year + '-' + monthData.month + '</span></div><div class="ui-datepicker-body"><table><thead><tr><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th><th>日</th></tr></thead><tbody>';
        for (var i = 0; i < monthData.days.length; i++) {
            var date = monthData.days[i];
            if (i % 7 === 0) {
                html += '<tr>';
            }
            html += '<td data-date="'+date.date+'">' + date.showDate + '</td>';
            if (i % 7 === 6) {
                html += '</tr>';
            }
        }
        html += '</tbody></table></div>';
        return html;
    };
    datepicker.render = function(direction){
        var year,month;
        if(monthData){
            year = monthData.year;
            month = monthData.month;
        }
        //console.log(direction);
        if(direction === 'prev'){
            month--;
        }
        if(direction === 'next'){
            month++;
        }
        if (month == 0) { 
          year--;
          month = 12;
        }
        if (month == 13) {
          year++;
          month = 1;
        }
        
        var html = datepicker.buildUI(year,month);
        
        $wrapper = document.querySelector('.ui-datepicker-wrapper');
        if (!$wrapper) {
          $wrapper = document.createElement('div');
          document.body.appendChild($wrapper);
          $wrapper.className = 'ui-datepicker-wrapper';
        }
        $wrapper.innerHTML = html;
    };
    datepicker.init = function (input) {
        datepicker.render();
        var $input = document.querySelector(input);
        var isOpen = false;
        $input.addEventListener('click', function () {
            if (isOpen) {
                $wrapper.classList.remove('ui-datepicker-wrapper-show');
                isOpen = false;
            } else {
                $wrapper.classList.add('ui-datepicker-wrapper-show');
                var left = $input.offsetLeft;
                var top = $input.offsetTop;
                var height = $input.offsetHeight;
                $wrapper.style.top = top + height + 2 + 'px';
                $wrapper.style.left = left + 'px';
                isOpen = true;
            }
        }, false);
        $wrapper.addEventListener('click',function (e) {
            var $target = e.target;
            if(!$target.classList.contains('ui-datepicker-btn')) return;
            
            //上一月
            if($target.classList.contains('ui-datepicker-prev-btn')){
                //console.log('prev');
                //document.body.removeChild($wrapper);
                datepicker.render('prev');
                //$wrapper.classList.add('ui-datepicker-wrapper-show');
            }else if($target.classList.contains('ui-datepicker-next-btn')){
            //下一月
                //console.log('next');
                //document.body.removeChild($wrapper);
                datepicker.render('next');
                //$wrapper.classList.add('ui-datepicker-wrapper-show');
            }
        },false);
        $wrapper.addEventListener('click',function (e) {
            var $target = e.target;
            if($target.tagName.toLowerCase() !== 'td') return;
            
            var date = new Date(monthData.year, monthData.month-1,$target.dataset.date);
            $input.value = format(date);
            $wrapper.classList.remove('ui-datepicker-wrapper-show');
            isOpen = false;
            
        },false);
    }
    function format(date){
        var ret = '';
        var padding = function(num){
            if(num < 9){
                return '0'+ num;
            }
            return num;
        }
        ret += date.getFullYear() + '-';
        ret += padding(date.getMonth() + 1) + '-';
        ret += padding(date.getDate());
        return ret;
    }
})();
赏

请我喝杯咖啡

扫一扫，分享到微信

微信分享二维码

tag:

    缺失模块。
    1、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    2、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: true
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

因为有梦，所以坚持。<br> 热爱生活，追求技术。<br> 大家好，我是Hyde