定时任务管理(三)页面优化-日期控件

定时任务管理(三)页面优化-日期控件

日期控件主页
http://www.dynarch.com/projects/calendar/

我下载了最新版本
http://www.dynarch.com/projects/calendar/download/1.7/JSCal2-1.7.zip

最新版本文档
http://www.dynarch.com/projects/calendar/doc/

功能很强大，呵呵，用起来也比较简单方便。
在我用到空间的页面triggerEdit.vm里面导入js和css文件
<link rel="stylesheet" type="text/css" href="./components/jscal/css/jscal2-1.7.css" />
<link rel="stylesheet" type="text/css" href="./components/jscal/css/border-radius.css" />
<link rel="stylesheet" type="text/css" href="./components/jscal/css/gold/gold.css" />
<script type="text/javascript" src="./components/jscal/js/jscal2-1.7.js"></script>
<script type="text/javascript" src="./components/jscal/js/lang/en.js"></script>
当然这些文件都要事先从里面拷贝到自己的WEB项目中
我用到的两个地方，这里面的button很难看，以后再考虑界面优化的事情，
<tr>
<td>
开始调用时间：
</td>
<td>
<input id="startTime" name="startTime"/><button id="startTime_btn">...</button>
</td>
</tr>
<tr>
<td>
结束调用时间：
</td>
<td>
<input id="endTime" name="endTime"/><button id="endTime_btn">...</button>
</td>
</tr>
下边的JS区域如下：
<script>
Calendar.setup({
trigger : "startTime_btn",
showTime : "true",
dateFormat : "%Y-%m-%d %H:%M:%S",
inputField : "startTime",
onSelect : function() { this.hide() }
});
Calendar.setup({
trigger : "endTime_btn",
showTime : "true",
dateFormat : "%Y-%m-%d %H:%M:%S",
inputField : "endTime",
onSelect : function() { this.hide() }
});
</script>
里面的
"%Y-%m-%d %H:%M:%S"表示我要显示日期和时间，形如：2010-01-04 15:35:00