作者:zccst
由单日历改为双日历,整整花了1.5天的实现。这还不是自己实现,只是稍有改动而已。
先上一张截图:
一、环境准备
1,将xx.js文件放到dep下
dep/jscal/1.9/calendarLang.js
dep/jscal/1.9/jscal.js
dep/jscal/moment.min.js
dep/jscal/timeSelect.js
2,将xx.css文件放到asset/css下
asset/css/cmain.css
asset/css/jscal2.css
3,在seajsconfig.js里引入他们
'jscal': 'dep/jscal2/1.9/jscal.js',
'calendarLang': 'dep/jscal2/1.9/calendarLang.js',
'moment': 'dep/jscal2/moment.min.js',
'timeSelect': 'dep/jscal2/timeSelect.js',
4,在index.html里引入css文件
<link rel="stylesheet" type="text/css" href="asset/css/jscal2.css">
<link rel="stylesheet" type="text/css" href="asset/css/cmain.css">
5,将图片放到asset/images/下
注:没有再建目录
二、使用
1,引入组件
require('calendarLang');
var Backbone = require('backbone'),
jscal = require('jscal'),
注:此时要将jscal和calendarLang文件的第一行修改一下
define(function(require, exports, module){/*'jscal', */
define(function(require, exports, module){/*'calendarLang', */
2,在backbone的initialize方法里
var cal = Calendar.setup({
onSelect: function(cal) { cal.hide() },
showTime: true
});
cal.manageFields("t_test_btn", "t_test_input", "%Y-%m-%d %I:%M %p");
3,使用封装后的组件
(1)将该文件放到指定位置,并在seajsConfig.js中引用
"selectTrigger": "src/component/selectTrigger.js",
(2)继续增加cmain.css,并在index.html中引入
(3)在使用的文件中引入该文件
require('calendarLang');
jscal = require('jscal'),
SelectTrigger = require('selectTrigger'),
TimeSelect = require('timeSelect'),//其实
(4)代码
在html页面增加
<div id="time-select-container" style=" float: right; margin-right:2px; width: 230px;"></div>
在js文件增加
//引入单日历控件
/*
var cal = Calendar.setup({
onSelect: function(cal) { cal.hide() },
showTime: true
});
cal.manageFields("t_test_btn", "t_test_input", "%Y-%m-%d %H:%M:%S");*/
//引入双日历控件
var me = this;
var timeSelect = new TimeSelect({
onSelect: function(o){
timeSelect.errmsg('');
//做业务上的校验,比如有些表不允许查询今天的数据,则需要给予提示
//投放网络的domain级别的列表查询,不支持当日数据查询,且时间跨度不超过31天
//其他表时间跨度不超过366天
//不能选择未来的时间
if(!o.excludeTodayFuture()){
timeSelect.errmsg('请选择今天之前(不含今天)的时间范围');
return false;
}
if(o.dayDistance() > 365){
timeSelect.errmsg('时间跨度不能超过1年,请重新选择');
return false;
}
//console.log(o);
/*
if(o.dayDistance() > 31 ){
timeSelect.errmsg('时间跨度不能超过1个月,请重新选择');
return false;
}
if(o.isToday()){
alert('对不起,系统不支持查询当日数据');
return false;
}*/
//将数据设回可见区域
me.trigger.setText(o.getDisplayText());
me.currentTimeSelect = o;
//me.search();
return true;
}
});
var ts = timeSelect.getDefaultTimeSelect();
me.currentTimeSelect = ts;
this.trigger = new SelectTrigger('#time-select-container',timeSelect,{defaultText:ts.text});
this.trigger.reset();
(5)改造
增加错误提示函数
修复获取当前时间的bug
修改开始、结束时间展示(由span改为input)
如果您觉得本文的内容对您的学习有所帮助,您可以微信:
- 大小: 49.4 KB
分享到:
相关推荐
NULL 博文链接:https://goowolf.iteye.com/blog/521175
日历控件 日历控件 日历控件日历控件 日历控件 日历控件日历控件 日历控件 日历控件日历控件 日历控件 日历控件日历控件 日历控件 日历控件日历控件 日历控件 日历控件日历控件 日历控件 日历控件
非常好用的双日历控件,兼容所有浏览器,适合所有需要双日历控件的网站,内有demo
个JS日历控件个JS日历控件个JS日历控件个JS日历控件个JS日历控件个JS日历控件个JS日历控件个JS日历控件个JS日历控件个JS日历控件个JS日历控件个JS日历控件
很好用的日历控件,日历、控件很好用的日历控件,日历、控件很好用的日历控件,日历、控件很好用的日历控件,日历、控件
js日历控件js日历控件js日历控件js日历控件js日历控件js日历控件js日历控件js日历控件js日历控件js日历控件
NULL 博文链接:https://zccst.iteye.com/blog/2073573
Qt 自定义 Calendar 日历 控件 方便控制 及实现样式表
the coolest DHTML calendar 超炫界面 功能强大 附demo
在EXCEL中,可以通过双击单元格,调出日历控件,通过对日历控件的操作,将所选日期更新到单元格中,该控件代码完全开放免费,供大家学习和使用,感兴趣的同学可以多多关注www.allmlp.com,让我们共同成长共同学习。
本人收集的android实现日历控件的源代码,希望能帮助大家。
基于Android平台的日历提醒软件的设计与实现.doc 基于Android平台的日历提醒软件的设计与实现.doc 基于Android平台的日历提醒软件的设计与实现.doc 基于Android平台的日历提醒软件的设计与实现.doc 基于Android平台...
各种格式的日历控件,应有尽有!只需要给不同的格式作参数就可以了!美观漂亮!
基于Ext2的日历控件和IP地址输入控件.zip
基于javascript脚本的网页日历控件,格式为2013-01-01
jquery双日历插件_日期区间选择控件,用户不用来回拉,会展示两个月日期
js日历控件 js日历控件 js日历控件 js日历控件 js日历控件
基于bootstrap的双日历插件,也可单,设计很灵活,你值得拥有