<!DOCTYPE html>
<html>
<head>
<style>
/*字体*/
@font-face {
font-family: 'Chinese Quote';
src: local('PingFang SC'), local('SimSun');
unicode-range: U+2018, U+2019, U+201c, U+201d;
}
#my_time {
/*调用字体*/
font-family: Arial, 'Hiragino Sans GB', 'Microsoft Yahei', 'Microsoft Sans Serif', sans-serif;
width: 278px;
background-color: #fff;
border-radius: 4px;
/*阴影边框 + 圆角*/
-webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
position: relative;
}
#my_time:hover {
box-shadow: 0 2px 8px #1890ff;
}
/*时间头*/
#my_time .time_head {
border-bottom: 1px solid #e8e8e8;
height: 40px;
line-height: 40px;
text-align: center;
}
/*鼠标手形*/
#my_time .time_head a {
cursor: pointer;
}
/*鼠标放上*/
#my_time .time_head a:hover {
color: #40a9ff;
}
/* 上一年，上一月 */
#my_time .syn:after {
content: '\AB';
}
#my_time .xyn:after {
content: '\BB';
}
#my_time .syy:after {
content: '\2039';
}
#my_time .xyy:after {
content: '\203A';
}
#my_time .syn,
#my_time .xyn,
#my_time .syy,
#my_time .xyy {
position: absolute;
}
#my_time .syn {
left: 7px;
}
#my_time .xyn {
right: 7px;
}
#my_time .syy {
left: 29px;
}
#my_time .xyy {
right: 29px;
}
#my_time .time_head span a {
padding: 0 2px;
}
/*时间体*/
#my_time .time_body th {
line-height: 18px;
width: 33px;
padding: 6px 0;
text-align: center;
color: rgba(0, 0, 0, 0.65);
}
#my_time .time_body td {
line-height: 18px;
width: 33px;
padding: 6px 0;
text-align: center;
}
#my_time .time_body .No_Include {
color: rgba(0, 0, 0, 0.25);
}
#my_time .time_body td div {
width: 24px;
height: 24px;
line-height: 22px;
}
#my_time .time_body td div:hover {
background: #e6f7ff;
cursor: pointer;
}
#my_time .time_body {
padding: 8px 12px;
border-bottom: 1px solid #e8e8e8;
}
/*
底部
*/
.time_footer {
border-top: 1px solid #e8e8e8;
line-height: 38px;
padding: 0 12px;
position: relative;
}
#my_time .time_footer .btn {
display: inline-block;
cursor: pointer;
border: 1px solid transparent;
background-color: #1890ff;
border-color: #1890ff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);
box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
padding: 0 7px;
font-size: 14px;
border-radius: 4px;
height: 24px;
line-height: 22px;
color: #fff;
}
/*此刻*/
#my_time .time_footer .ck {
color: #1890ff;
cursor: pointer;
}
/*选择时间*/
#my_time .time_footer .xzsj {
position: absolute;
right: 80px;
color: #1890ff;
cursor: pointer;
}
#my_time .time_footer .ck:hover,
#my_time .time_footer .xzsj:hover {
color: #40a9ff;
}
/*确认*/
#my_time .time_footer .qr {
position: absolute;
right: 10px;
top: 15%;
cursor: pointer;
}
#my_time .time_footer .qr:hover {
color: #fff;
background-color: #40a9ff;
border-color: #40a9ff;
}
/*选中*/
#my_time .time_footer .xz {
background: #1890ff;
color: #fff;
}
/*历史*/
#my_time .time_footer .ls {
border-color: #1890ff;
font-weight: bold;
color: #1890ff;
border: 1px solid;
}
</style>
</head>
<body>
<div>
<input type="text" value="2020 2020 2020">
</div>
<div id="my_time">
<div>
<div class="time_head">
<a title="上一年" class="syn"></a>
<a title="上个月" class="syy"></a>
<sapn>
<a title="选择年份">2020年</a>
<a title="选择月份">3月</a>
</sapn>
<a title="下个月" class="xyy"></a>
<a title="下一年" class="xyn"></a>
</div>
<div class="time_body">
<table>
<tr>
<th title="周一">
<span>一</span>
</th>
<th title="周二">
<span>二</span>
</th>
<th title="周三">
<span>三</span>
</th>
<th title="周四">
<span>四</span>
</th>
<th title="周五">
<span>五</span>
</th>
<th title="周六">
<span>六</span>
</th>
<th title="周日">
<span>日</span>
</th>
</tr>
<tr role="row" class="">
<td title="2020年2月24日" class="">
<div class="No_Include">24</div>
</td>
<td title="2020年2月25日" class="">
<div class="No_Include">25</div>
</td>
<td title="2020年2月26日" class="">
<div class="No_Include">26</div>
</td>
<td title="2020年2月27日" class="">
<div class="No_Include">27</div>
</td>
<td title="2020年2月28日" class="">
<div class="No_Include">28</div>
</td>
<td title="2020年2月29日" class="">
<div class="No_Include">29</div>
</td>
<td title="2020年3月1日" class="">
<div class="xz">1</div>
</td>
</tr>
<tr role="row" class="">
<td title="2020年3月2日" class="ant-calendar-cell">
<div class="ls">2</div>
</td>
<td title="2020年3月3日" class="ant-calendar-cell">
<div class="">3</div>
</td>
<td title="2020年3月4日" class="ant-calendar-cell">
<div class="">4</div>
</td>
<td title="2020年3月5日" class="ant-calendar-cell">
<div class="">5</div>
</td>
<td title="2020年3月6日" class="ant-calendar-cell">
<div class="">6</div>
</td>
<td title="2020年3月7日" class="ant-calendar-cell">
<div class="">7</div>
</td>
<td title="2020年3月8日" class="ant-calendar-cell">
<div class="">8</div>
</td>
</tr>
<tr role="row" class="">
<td title="2020年3月9日" class="ant-calendar-cell">
<div class="">9</div>
</td>
<td title="2020年3月10日" class="ant-calendar-cell">
<div class="">10</div>
</td>
<td title="2020年3月11日" class="ant-calendar-cell">
<div class="">11</div>
</td>
<td title="2020年3月12日" class="ant-calendar-cell">
<div class="">12</div>
</td>
<td title="2020年3月13日" class="ant-calendar-cell">
<div class="">13</div>
</td>
<td title="2020年3月14日" class="ant-calendar-cell">
<div class="">14</div>
</td>
<td title="2020年3月15日" class="ant-calendar-cell">
<div class="">15</div>
</td>
</tr>
<tr role="row" class="">
<td title="2020年3月16日" class="ant-calendar-cell">
<div class="">16</div>
</td>
<td title="2020年3月17日" class="ant-calendar-cell">
<div class="">17</div>
</td>
<td title="2020年3月18日" class="ant-calendar-cell">
<div class="">18</div>
</td>
<td title="2020年3月19日" class="ant-calendar-cell">
<div class="">19</div>
</td>
<td title="2020年3月20日" class="ant-calendar-cell">
<div class="">20</div>
</td>
<td title="2020年3月21日" class="ant-calendar-cell">
<div class="">21</div>
</td>
<td title="2020年3月22日" class="ant-calendar-cell">
<div class="">22</div>
</td>
</tr>
<tr role="row" class="ant-calendar-current-week ant-calendar-active-week">
<td title="2020年3月23日" class="ant-calendar-cell">
<div class="">23</div>
</td>
<td title="2020年3月24日"
class="ant-calendar-cell ant-calendar-today ant-calendar-selected-date ant-calendar-selected-day">
<div aria-selected="true" class="">24</div>
</td>
<td title="2020年3月25日" class="ant-calendar-cell">
<div class="">25</div>
</td>
<td title="2020年3月26日" class="ant-calendar-cell">
<div class="">26</div>
</td>
<td title="2020年3月27日" class="ant-calendar-cell">
<div class="">27</div>
</td>
<td title="2020年3月28日" class="ant-calendar-cell">
<div class="">28</div>
</td>
<td title="2020年3月29日" class="ant-calendar-cell">
<div class="">29</div>
</td>
</tr>
<tr role="row" class="">
<td title="2020年3月30日" class="ant-calendar-cell">
<div class="">30</div>
</td>
<td title="2020年3月31日" class="ant-calendar-cell ant-calendar-last-day-of-month">
<div class="">31</div>
</td>
<td title="2020年4月1日" class="ant-calendar-cell ant-calendar-next-month-btn-day">
<div class="">1</div>
</td>
<td title="2020年4月2日" class="ant-calendar-cell ant-calendar-next-month-btn-day">
<div class="">2</div>
</td>
<td title="2020年4月3日" class="ant-calendar-cell ant-calendar-next-month-btn-day">
<div class="">3</div>
</td>
<td title="2020年4月4日" class="ant-calendar-cell ant-calendar-next-month-btn-day">
<div class="">4</div>
</td>
<td title="2020年4月5日" class="ant-calendar-cell ant-calendar-next-month-btn-day">
<div class="">5</div>
</td>
</tr>
</table>
</div>
<div class="time_footer">
<span class="">
<a title="2020年3月24日" class="ck">此刻</a>
<a class="xzsj">选择时间</a>
<a class="btn qr">确 定</a>
</span>
<i></i>
</div>
</div>
</div>
</body>
</html>
