今天给大家分享一款基于jQuery带备忘录功能的日期选择器。这款日期控制带有备记忘录功能。有备忘录的日期有一个圆圈，单击圆圈显示备忘录。该实例适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。效果图如下：
实现的代码。
html代码：
<div class="container">
<header class="htmleaf-header">
<h1>
jQuery简单带备忘录功能的日期选择器插件</h1>
</header>
<div class="calendar-container">
<div class="calendar">
<header>
<h2 class="month">
</h2>
<a class="btn-prev fontawesome-angle-left" href="#"></a><a class="btn-next fontawesome-angle-right"
href="#"></a>
</header>
<table>
<thead>
<tr>
<td>
一
</td>
<td>
二
</td>
<td>
三
</td>
<td>
四
</td>
<td>
五
</td>
<td>
六
</td>
<td>
日
</td>
</tr>
</thead>
<tbody>
<tr>
<td date-month="12" date-day="1">
1
</td>
<td date-month="12" date-day="2">
2
</td>
<td date-month="12" date-day="3">
3
</td>
<td date-month="12" date-day="4">
4
</td>
<td date-month="12" date-day="5">
5
</td>
<td date-month="12" date-day="6">
6
</td>
<td date-month="12" date-day="7">
7
</td>
</tr>
<tr>
<td date-month="12" date-day="8">
8
</td>
<td date-month="12" date-day="9">
9
</td>
<td date-month="12" date-day="10">
10
</td>
<td date-month="12" date-day="11">
11
</td>
<td date-month="12" date-day="12">
12
</td>
<td date-month="12" date-day="13">
13
</td>
<td date-month="12" date-day="14">
14
</td>
</tr>
<tr>
<td date-month="12" date-day="15">
15
</td>
<td date-month="12" date-day="16">
16
</td>
<td date-month="12" date-day="17">
17
</td>
<td date-month="12" date-day="18">
18
</td>
<td date-month="12" date-day="19">
19
</td>
<td date-month="12" date-day="20">
20
</td>
<td date-month="12" date-day="21">
21
</td>
</tr>
<tr>
<td date-month="12" date-day="22">
22
</td>
<td date-month="12" date-day="23">
23
</td>
<td date-month="12" date-day="24">
24
</td>
<td date-month="12" date-day="25">
25
</td>
<td date-month="12" date-day="26">
26
</td>
<td date-month="12" date-day="27">
27
</td>
<td date-month="12" date-day="28">
28
</td>
</tr>
<tr>
<td date-month="12" date-day="29">
29
</td>
<td date-month="12" date-day="30">
30
</td>
<td date-month="12" date-day="31">
31
</td>
</tr>
</tbody>
</table>
<div class="list">
<div class="day-event" date-month="12" date-day="4">
<a href="#" class="close fontawesome-remove"></a>
<h2 class="title">
Lorem ipsum 1</h2>
<p class="date">
2015-01-23</p>
<p>
Lorem Ipsum är en utfyllnadstext från tryck- och förlagsindustrin. Lorem ipsum har
varit standard ända sedan 1500-talet, när en okänd boksättare tog att antal bokstäver
och blandade dem för att göra ett provexemplar av en bok.</p>
<label>
<span>Read more!</span>
</label>
</div>
<div class="day-event" date-month="12" date-day="13">
<a href="#" class="close fontawesome-remove"></a>
<h2 class="title">
Lorem ipsum 2</h2>
<p class="date">
2015-01-23</p>
<p>
Lorem Ipsum är en utfyllnadstext från tryck- och förlagsindustrin. Lorem ipsum har
varit standard ända sedan 1500-talet, när en okänd boksättare tog att antal bokstäver
och blandade dem för att göra ett provexemplar av en bok.</p>
<label>
<span>Read more!</span>
</label>
</div>
<div class="day-event" date-month="12" date-day="14">
<a href="#" class="close fontawesome-remove"></a>
<h2 class="title">
Lorem ipsum 3</h2>
<p class="date">
2015-01-23</p>
<p>
Lorem Ipsum är en utfyllnadstext från tryck- och förlagsindustrin. Lorem ipsum har
varit standard ända sedan 1500-talet, när en okänd boksättare tog att antal bokstäver
och blandade dem för att göra ett provexemplar av en bok.</p>
<label>
<span>Read more!</span>
</label>
</div>
<div class="day-event" date-month="12" date-day="16">
<a href="#" class="close fontawesome-remove"></a>
<h2 class="title">
Lorem ipsum 4</h2>
<p class="date">
2015-01-23</p>
<p>
Lorem Ipsum är en utfyllnadstext från tryck- och förlagsindustrin. Lorem ipsum har
varit standard ända sedan 1500-talet, när en okänd boksättare tog att antal bokstäver
och blandade dem för att göra ett provexemplar av en bok.</p>
<label>
<span>Read more!</span>
</label>
</div>
<div class="day-event" date-month="12" date-day="24">
<a href="#" class="close fontawesome-remove"></a>
<h2 class="title">
Lorem ipsum 5</h2>
<p class="date">
2015-01-23</p>
<p>
Lorem Ipsum är en utfyllnadstext från tryck- och förlagsindustrin. Lorem ipsum har
varit standard ända sedan 1500-talet, när en okänd boksättare tog att antal bokstäver
och blandade dem för att göra ett provexemplar av en bok.</p>
<label>
<span>Read more!</span>
</label>
</div>
<div class="day-event" date-month="12" date-day="31">
<a href="#" class="close fontawesome-remove"></a>
<h2 class="title">
Lorem ipsum 6</h2>
<p class="date">
2014-12-31</p>
<p>
Lorem Ipsum är en utfyllnadstext från tryck- och förlagsindustrin. Lorem ipsum har
varit standard ända sedan 1500-talet, när en okänd boksättare tog att antal bokstäver
och blandade dem för att göra ett provexemplar av en bok.</p>
<label>
<span>Read more!</span>
</label>
</div>
</div>
</div>
</div>
</div>