首页 > 代码库 > 基于jQuery带备忘录功能的日期选择器
基于jQuery带备忘录功能的日期选择器
今天给大家分享一款基于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>
via：http://www.w2bc.com/Article/19446
基于jQuery带备忘录功能的日期选择器
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。