今天给大家分享一款基于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带备忘录功能的日期选择器的更多相关文章

  1. 一款基于jQuery带事件记录的日历插件

    之前我们也已经分享过不少jQuery日历插件,有些应用了CSS3的特性,外观就特别漂亮.今天要分享的这款jQuery日历插件不仅有着绚丽的外观,而且带有日期事件记录功能,点击日期即可展开事件记录窗口, ...

  2. 基于jQuery带标题的图片3D切换焦点图

    今天给大家分享一款基于jQuery带标题的图片3D切换焦点图.这款焦点图适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 实现的代码. htm ...

  3. 基于jQuery带进度条全屏图片轮播代码

    基于jQuery带进度条全屏图片轮播代码.这是一款基于jQuery实现的oppo手机官网首页带进度条全屏图片轮播特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div ...

  4. 一款基于jquery带百分比的响应式进度加载条

    今天要给大家带来一款基于jquery带百分比的响应式进度加载条.这款加载条非常漂亮,而且带有进度的百度比,且在不同的百分比用的是不同的颜色.而且这款加载条采用了响应式设计,在不同的分辨率的显示器下完美 ...

  5. jquery ui 常用（一）（自动完成 | 标签页 | 折叠面板 | 带图标的按钮 | 日期选择器| ）

    条件,引用3个文件 jquery-ui.min.css; jquery.min.js; jquery-ui.min.js. 一.自动完成 http://www.w3cschool.cc/jqueryu ...

  6. 基于jQuery带图标的多级下拉菜单

    之前为大家分享了很多导航菜单.今天我们要来分享一款很不错的jQuery左侧带小图标的多级下拉菜单,菜单是垂直的,每一个菜单项带有一个小图标,看起来非常专业.并且菜单支持无限极下拉,所以对各位Web开发 ...

  7. 基于jquery带时间轴的图片轮播切换代码

    基于jquery图片标题随小圆点放大切换.这是是一款带时间轴的图片轮播切换代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="decoroll2 ...

  8. 动态创建的文本框想要加上jQuery的datepicker功能变成日期选择控件该怎么办？

    通常页面输入控件想得到日期选择功能,借助jQuery是这样实现的: 1.载入css和js <script src="jqueryui/jquery-ui.js" type=& ...

  9. 《基于JQuery和CSS的特效整理》系列分享专栏

    <基于JQuery和CSS的特效整理>已整理成PDF文档,点击可直接下载至本地查阅https://www.webfalse.com/read/201724.html 文章 一款基于jQue ...

随机推荐

  1. Error assembling WAR: webxml attribute is required (or pre-existing WEB-INF/web.xml if executing in update mode) -> [Help 1]

    mvn war:war命令出错: 原因: maven的web项目默认的webroot是在src\main\webapp.如果在此目录下找不到web.xml就抛出以上的异常. 解决方案: 在pom.xm ...

  2. 一起学习 微服务(MicroServices)-笔记

    笔记 微服务特性: 1. 小 专注与做一件事(适合团队就是最好的) 2. 松耦合 独立部署 3. 进程独立 4. 轻量级通信机制 实践: 1. 微服务周边的一系列基础建设 Load Balancing ...

  3. 第三百二十七天 how can I 坚持

    都没心情学习了,睡觉.太失败了.  好了,你赢了,最怕女人不说话了,我妈一生气就不说话,有点怕我妈,你想删就把我删了吧,我不怪你. 给你个善意的建议,任何事情都要有度,过犹而不及,你是属于那种比较听家 ...

  4. linux下生成 SSH 公钥，用于GitHub

    ssh-keygen -t rsa -C <email> 参见 https://help.github.com/articles/generating-ssh-keys/ Then add ...

  5. Dagger学习笔记

    @Inject 提供依赖的构造函数,或者需要依赖的成员变量 @Module 提供依赖,实例化的地方( 使用module实例化,方便测试的时候替换成其他对象,而这也是和构造方法注入的区别,如果用构造方法 ...

  6. DaoFactory.java

    package com; import com.isoftstone.fwk.dao.ActionDao; import com.isoftstone.fwk.dao.Dao; import com. ...

  7. ActiveX控件

    什么是ActiveX控件:一个进程内服务器,支持多种的COM接口.(可以理解为,一个COM接口是一个纯抽象基类,你实现了它,并且它支持自注册,就是一个ActiveX控件了)可以把ActiveX控件看做 ...

  8. halcon，C# 学习

    Halcon学习之一:查询图像参数 1.get_grayval ( Image : : Row, Column : Grayval ) 计算Image图像中坐标为(Row,Column)的点的灰度值G ...

  9. .Net项目版本号的生成

    给.Net项目编译的程序集加入版本号的方式有许多种,包括: 1. 默认的方式,在每个项目的AssemblyInfo.cs文件中指定版本号: // Version information for an ...

  10. Unity3d：The requested item has been unloaded

    问题描述:System.Xml类库下实例化的对象所有枚举类的值都显示如标题错误解决方案1:查看所在类是否:MonoBehaviour,如果没继承,添加即可.<ignore_js_op>