Skip to content

Commit 5101f29

Browse files
TYRMarsTYRMars
committed
DatePicker Create
自制DatePicker
1 parent 67d922e commit 5101f29

File tree

6 files changed

+299
-105
lines changed

6 files changed

+299
-105
lines changed

‎.idea/workspace.xml‎

Lines changed: 137 additions & 103 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎DatePicker/css/base.css‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
.ui-datepicker-wrapper{
2+
width: 240px;
3+
font-size: 16px;
4+
color: #666;
5+
-webkit-box-shadow: 2px 2px 8px 2px rgba(128, 128, 128, .3);
6+
-moz-box-shadow: 2px 2px 8px 2px rgba(128, 128, 128, .3);
7+
box-shadow: 2px 2px 8px 2px rgba(128, 128, 128, .3);
8+
}
9+
10+
.ui-datepicker-wrapper .ui-datepicker-header{
11+
padding: 0 20px;
12+
height: 50px;
13+
line-height: 50px;
14+
text-align: center;
15+
background: #f0f0f0;
16+
border-bottom:1px solid #ccc;
17+
font-weight:bold;
18+
}
19+
20+
.ui-datepicker-wrapper .ui-datepicker-btn{
21+
font-family: serif;
22+
font-size: 20px;
23+
width: 20px;
24+
height: 50px;
25+
line-height: 50px;
26+
color: #1abc9c;
27+
text-align: center;
28+
cursor: pointer;
29+
text-decoration: none;
30+
}
31+
32+
.ui-datepicker-wrapper .ui-datepicker-prev-btn{
33+
float: left;
34+
}
35+
36+
.ui-datepicker-wrapper .ui-datepicker-next-btn{
37+
float: right;
38+
}
39+
40+
.ui-datepicker-wrapper .ui-datepicker-body table{
41+
width: 100%;
42+
border-collapse: collapse;
43+
}
44+
45+
.ui-datepicker-wrapper .ui-datepicker-body th,
46+
.ui-datepicker-wrapper .ui-datepicker-body td{
47+
height: 30px;
48+
text-align: center;
49+
}
50+
51+
.ui-datepicker-wrapper .ui-datepicker-body th{
52+
font-size: 12px;
53+
height: 40px;
54+
line-height: 40px;
55+
}
56+
57+
.ui-datepicker-wrapper .ui-datepicker-body td{
58+
border:1px solid #f0f0f0;
59+
font-size:10px;
60+
width:14%;
61+
cursor: pointer;
62+
}

‎DatePicker/index.html‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>DataPicker组件开发</title>
6+
<link rel="stylesheet" href="css/base.css">
7+
</head>
8+
<body>
9+
<div class="ui-datepicker-wrapper">
10+
<div class="ui-datepicker-header">
11+
<a href="#" class="ui-datepicker-btn ui-datepicker-prev-btn">&lt;</a>
12+
<a href="#" class="ui-datepicker-btn ui-datepicker-next-btn">&gt;</a>
13+
<span class="ui-datepicker-curr-month">2016-12</span>
14+
</div>
15+
<div class="ui-datepicker-body">
16+
<table>
17+
<thead>
18+
<tr>
19+
<th>日</th>
20+
<th>一</th>
21+
<th>二</th>
22+
<th>三</th>
23+
<th>四</th>
24+
<th>五</th>
25+
<th>六</th>
26+
</tr>
27+
</thead>
28+
<tbody>
29+
<tr>
30+
<td>29</td>
31+
<td>30</td>
32+
<td>1</td>
33+
<td>2</td>
34+
<td>3</td>
35+
<td>4</td>
36+
<td>5</td>
37+
</tr>
38+
<tr>
39+
<td>6</td>
40+
<td>7</td>
41+
<td>8</td>
42+
<td>9</td>
43+
<td>10</td>
44+
<td>11</td>
45+
<td>12</td>
46+
</tr>
47+
<tr>
48+
<td>13</td>
49+
<td>14</td>
50+
<td>15</td>
51+
<td>16</td>
52+
<td>17</td>
53+
<td>18</td>
54+
<td>19</td>
55+
</tr>
56+
<tr>
57+
<td>20</td>
58+
<td>21</td>
59+
<td>22</td>
60+
<td>23</td>
61+
<td>24</td>
62+
<td>25</td>
63+
<td>26</td>
64+
</tr>
65+
<tr>
66+
<td>27</td>
67+
<td>28</td>
68+
<td>29</td>
69+
<td>30</td>
70+
<td>1</td>
71+
<td>2</td>
72+
<td>3</td>
73+
</tr>
74+
</tbody>
75+
</table>
76+
</div>
77+
</div>
78+
</body>
79+
</html>

‎DatePicker/js/base.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
/**
2+
* Created by Jonathan Zhang on 2017/5/19.
3+
*/

‎JDMenu/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8">
5-
<title>Title</title>
5+
<title>JDMenu</title>
66
<link rel="stylesheet" href="css/base.css">
77

88

‎README.md‎

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,10 @@
22
## 总体目录
33
* JSDemo JS小程序
44
* JDMenu 京东无延迟菜单
5+
* DatePicker组件开发
56
## 知识点学习
7+
### JSDemo JS小程序
8+
####
69
### JDMenu 京东无延迟菜单
710
#### 1.开发普通二级菜单
811
* 事件代理方式进行绑定
@@ -15,4 +18,17 @@
1518
* 在事件被频繁触发时买只执行一次
1619
#### 3.基于用户行为预测的切换技术
1720
* 跟踪鼠标的移动
18-
* 用鼠标当前位置，和鼠标上一次位置与子菜单上下边缘形成的三角区域进行比较
21+
* 用鼠标当前位置，和鼠标上一次位置与子菜单上下边缘形成的三角区域进行比较
22+
### DatePicker组件开发
23+
#### 1.基础页面制作
24+
* 标头
25+
* 身体
26+
#### 2.数据部分
27+
* 渲染当月日历表格
28+
* 用于点击时取日期值
29+
##### 日期对象
30+
* newDate(year,month-1,date)
31+
* 月份需要-1
32+
* 越界自动进退位
33+
* getFullYear()/getMonth()/getDate()
34+
* getDay()获取当前日期是周几？

0 commit comments

Comments
 (0)