用户体验设计理念与技术网站 - 探索 · 分享 · 收获     注册账号 忘记密码 QQ一键登录

用户体验设计学院|UED学院

当前位置: 首页 > 脚本技术 > AJaX >

不错的双日期选择插件使用分享

时间:2011-06-04 20:58来源:oschina.net 作者:woerwin 阅读:
最近项目用到的一个日期选择插件 感觉不错,在这里简单分享一哈 因该插件是英文的,所以根据项目需要,将必要的改成了中文 我想应该能满足一般的需求了,因此直接用即可~\(≧▽≦)/~啦啦啦 1、加载引用相关文件,参见打包中演示即可 插件及演示下载地址: ht

最近项目用到的一个日期选择插件

感觉不错,在这里简单分享一哈

因该插件是英文的,所以根据项目需要,将必要的改成了中文

我想应该能满足一般的需求了,因此直接用即可~\(≧▽≦)/~啦啦啦

1、加载引用相关文件,参见打包中演示即可

插件及演示下载地址:http://u.115.com/file/dnsixsnu

代码片段(2)

[图片] 效果图

[代码] 部分实例代码

01 2、简单调用,见代码,包括:
02   
03 1)两个文本框显示
04   
05 2)一个文本框显示
06   
07 <script type=”text/javascript”> 
08 $(function(){
09 $(‘.rangeA’).daterangepicker({arrows:false});
10 $(‘#rangeB’).daterangepicker({arrows:true});
11 });
12 </script>
13   
14 3、时间段快速选择下拉列表部分代码
15   
16 更多请参看文件:daterangepicker.jQuery.js
17   
18 presetRanges: [
19 {text: '今天', dateStart: 'today', dateEnd: 'today' },
20 {text: '最近七天', dateStart: 'today-7days', dateEnd: 'today' },
21 {text: '本月', dateStart: function(){ return Date.parse('today').moveToFirstDayOfMonth(); }, dateEnd: 'today' },
22 {text: '上一个月', dateStart: function(){ return Date.parse('1 month ago').moveToFirstDayOfMonth(); }, dateEnd: function(){ return Date.parse('1 month ago').moveToLastDayOfMonth(); } }
23 ], 
24 presets: {
25 specificDate: ‘时间选择’, 
26 dateRange: ‘时间段选择’
27 },

原文链接:http://www.oschina.net/code/snippet_114104_4613

(责任编辑:uedtech。本文版权归作者所有,转载请注明来自UED学院,并保留原文作者与链接!)
顶一个
(0)
0%
踩一个
(0)
0%
------分隔线----------------------------
推荐内容