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. 东芝发布运行Win 10的AR眼镜,它和Google Glass企业版有哪些异同?

    https://www.leiphone.com/news/201803/Tw0nrq6vGDIvbmXr.html 雷锋网(公众号:雷锋网)获悉,3月13日,东芝发布新AR眼镜dynaEdge AR ...

  2. 使用jQuery获取radio/checkbox组的值的代码收集

    <!-- $("document").ready(function(){ $("#btn1").click(function(){ $("[na ...

  3. oracle归档日志的操作

                 oracle利用重做日志文件记录对数据库的操作.可是重做日志文件组是循环使用的,当所有的日志文件都被填满时,系统自己主动切换到第一组日志文件,当然数据库管理员也能够使用命令手 ...

  4. windows及linux环境下永久修改pip镜像源的方法

    一.在windows环境下修改pip镜像源的方法(以python3.5为例) (1):在windows文件管理器中,输入 %APPDATA% (2):会定位到一个新的目录下,在该目录下新建pip文件夹 ...

  5. 大智慧专业财务PFFIN(N,M)函数N的取值一览表

    每股指标 1001 摊薄每股收益 1002 净资产收益率 1003 每股经营活动现金流量 1004 每股净资产 1005 每股资本公积金 1006 每股未分配利润 1007 每股主营收入 1008 扣 ...

  6. AOP中Advice执行两遍的原因

    在我的spring项目中,Aop的Advice执行了两边,就好像拦截了两遍一样. 原因是:切面应该切到接口的实现类上,而不是接口上

  7. (纪录片)统计的乐趣 The Joy of Stats (2010)

    简介: 导演: 丹·希尔曼主演: Hans Rosling类型: 纪录片官方网站: www.bbc.co.uk/programmes/b00wgq0l制片国家/地区: 英国语言: 英语上映日期: 20 ...

  8. 微信小程序 - 滚动公告组件

    支持横轴.纵轴滚动. 点击下载:speaker

  9. RT/Metro商店应用如何调用SQLite数据库

    RT/Metro商店应用如何调用SQLite数据库 使用前,要安装:SQLite for Windows Runtime (Windows 8.1)(一个VS插件).还有Visual C++ Runt ...

  10. Jmeter AbstractJavaSamplerClient 案例

    1:首先到apache-jmeter-3.0\lib\ext目录下引用以下两个jar包到Java工程里面 ApacheJMeter_core.jar ApacheJMeter_java.jar 2:新 ...