1、本次介绍一个好用的 多日期选择插件：EasyUI date，适用于：需要一次性选择多个日期，无需手动一个一个进行添加。

2、效果图：

3、下载地址：http://www.jeasyui.com/download/index.php

4、汉化：建议在使用页面：

<script type="text/javascript" src="你的网站绝对地址/locale/easyui-lang-zh_CN.js"></script>

5、使用Demo：可参考http://www.jeasyui.com/demo/main/index.php?plugin=Calendar&theme=default&dir=ltr&pitem=Basic&sort=

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Basic Calendar - jQuery EasyUI Demo</title>

    <link rel="stylesheet" type="text/css" href="/Public/plugins/easyui/themes/default/easyui.css">

    <link rel="stylesheet" type="text/css" href="/Public/plugins/easyui/themes/icon.css">

    <link rel="stylesheet" type="text/css" href="/Public/plugins/easyui/demo/demo.css">

    <script type="text/javascript" src="/Public/plugins/easyui/jquery.min.js"></script>

    <script type="text/javascript" src="/Public/plugins/easyui/jquery.easyui.min.js"></script>

</head>

<body>

    <h2>Basic Calendar</h2>

    <p>Click to select date.</p>

    <div style="margin:20px 0"></div>

    <div class="easyui-calendar" style="width:250px;height:250px;display:none;position: absolute;z-index: 999;margin-top: 22px;"></div>

    <input type="text" name="ftsj" value="" id="ftsj">

</body>

<script type="text/javascript">

$(function(){

    $("#ftsj").focus(function(){

        $(".easyui-calendar").css("display","");

    });

    $(document).on("click",".calendar-day",function(){

        var date = $(this).attr("abbr");

        var date2 = date.replace(/,/g,"-");

        console.log("点击的日期=="+date2);

        //若需要进行存储，这里执行ajax 即可。

    })

})

</script>

</html>

6、注：如果和你页面样式有冲突，请去掉上面demo的demo.css

【jquery】多日期选择插件easyui date的更多相关文章

  1. 移动设备日期选择插件（基于JQUERY）

    上周花了2个小时写的一个日期选择插件,比较适合移动端的设备.先看个效果图吧.如果刚好是你需要的就往下吧,不需要的也可以继续..... 其实网络上已经有的了类似的成熟插件,比如基于mobiscroll, ...

  2. EasyUI 日期选择插件封装成选择到月份的插件

    将普通的日期选择插件封装成选择到月份的插件:                     var nowMonth = new Date();                    var month = ...

  3. 贴近用户体验的jQuery日期选择插件

    分享一款贴近用户体验的jQuery日期选择插件.这是一款双日历jQuery日期选择时间插件pickerDateRange.效果图如下: 在线预览   源码下载 var dateRange = new ...

  4. 纯原生js移动端日期选择插件

    最近在项目上需要使用日期选择插件,由于是移动端的项目,对请求资源还是蛮节约的,可是百度上一搜,诶~全是基于jquery.zepto的,本来类库就很大,特别像mobiscroll这种样式文件一大堆又丑又 ...

  5. angular2+ 引用layDate日期选择插件

    layDate日期选择插件使用npm安装好像是行不通的,但angular2+的日期选择控件库又不能够支持时分秒的选择 在angular项目中引用layDate 1. 首先官网下载layDate独立版, ...

  6. 基于jquery的城市选择插件

    城市选择插件的难度不是很大,主要是对dom节点的操作.而我写的这个插件相对功能比较简答,没有加入省市联动. 上代码好了,参照代码的注释应该比较好理解. /* *基于jquery的城市选择插件 *aut ...

  7. 推荐三款日期选择插件(My97DatePicker+jquery.datepicker+Mobiscroll)

    1.My97DatePicker 纯原生JS,专注于PC端,支持IE6+:页面上只需要引入WdatePicker.js文件,但是My97DatePicker整个目录是一个整体,最好不要破坏里面的目录结 ...

  8. 打造基于jQuery的日期选择控件

    终于把jQuery拼写正确了哈,哈哈javascript也是区分大小写的,所以确实不能写错,今天我来和大家分享的是日期选择控件的实现,功能也许不够强大,但是能够满足需求. 我之前也写过(正确的说是改过 ...

  9. HTML5 input date属性引起的探索——My97DatePicker（日期选择插件）

    不得不说H5的input date属性真的好用,之前我写的http://www.cnblogs.com/tu-0718/p/6729274.html这篇博客里面也有提到,不过虽然移动端对H5的支持还是 ...

随机推荐

  1. [leetcode]Unique Binary Search Trees II @ Python

    原题地址:https://oj.leetcode.com/problems/unique-binary-search-trees-ii/ 题意:接上一题,这题要求返回的是所有符合条件的二叉查找树,而上 ...

  2. [leetcode]Word Ladder II @ Python

    [leetcode]Word Ladder II @ Python 原题地址:http://oj.leetcode.com/problems/word-ladder-ii/ 参考文献:http://b ...

  3. 用非递归、不用栈的方法，实现原位（in-place）的快速排序

    大体思路是修改Partition方法将原本枢数的调整放到方法结束后去做.这样因为数组右侧第一个大于当前枢数的位置就应该是未划分的子数组的边界.然后继续进行Partition调整.这种写法照比递归的写法 ...

  4. linux下获取硬盘使用情况[总结]

    1.前言 在嵌入式设备中,硬盘空间非常有限,在涉及到经常写日志的进程时候,需要考虑日志的大小和删除,不然很快就硬盘写满,导致日志程序崩溃.为了捕获硬盘写满的异常场景,我们需要在写日志过程中判断硬盘空间 ...

  5. memcache的资料集

    1. 安装与查看过程(完整) https://www.cyberciti.biz/faq/rhel-fedora-linux-install-memcached-caching-system-rpm/ ...

  6. （文档）流媒体资源 Streaming Assets

    Most assets in Unity are combined into the project when it is built. However, it is sometimes useful ...

  7. 设置py文件的路径

    想在IDLE中打开py文件,需要设置PYTHONPATH环境变量: 设置后,就能在IDLE的Path Browser中看到sys.path了: 然后,就可以用import了

  8. DOM元素尺寸offsetWidth,scrollWidth,clientWidth等具体解释

    样例: <div id="div" style="height: 200px;width: 200px;border:solid 50px red;overflow ...

  9. XE6入门（一）Hello World

    XE6的IDE已经设计的非常棒了,是该放弃D7了,投入XE6的怀抱.. 本人用的XE6版本是 Embarcadero.Delphi.XE6.RTM.Inc.Update1.v20.0.16277.12 ...

  10. LintCode: Single Number

    C++ (1)异或操作 3^3=0 (2)for (auto &i : Obejuct) {} class Solution { public: /** * @param A: Array o ...