作者: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)
如果您觉得本文的内容对您的学习有所帮助,您可以微信: