基于jscal2单日历与双日历控件的实现

作者：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）


如果您觉得本文的内容对您的学习有所帮助，您可以微信：