今天发布了Hourlog 0.02版:给日期添加了JSCalendar功能,就是能够经过弹出层用鼠标来选择日期;javascript
javascript日期我选择了jscalendar, http://www.dynarch.com/projects/calendar/,功能很是强大,并且不依赖于任何框架,使用起来很是舒服,并且也很是小巧;css
很惋惜,做为菜鸟的我在Hourlog上记录了我添加这个功能花了2个小时时间:
第一步是写个静态页面拷贝sample,用了20分钟左右;
第二步放到项目里面少引用了一个css文件致使显示样式不对,查了约半个小时;
第三步发现个人css里面下面这段和jscalendar有冲突,致使顶部的当前年月和底部的今天字样位置显示不在中间,而是靠左和其余按钮重叠;html
* {java
margin: 0;
padding: 0;框架
}ide
去jscalendar主页上下载JSCal2-1.9后,简单的使用以下,具体效果能够登陆Hourlog 查看
1. html开头添加this
<link rel=”stylesheet” type=”text/css” href=”src/css/jscal2.css” />
<link rel=”stylesheet” type=”text/css” href=”src/css/border-radius.css” />
<link rel=”stylesheet” type=”text/css” href=”src/css/steel/steel.css” />
<script type=”text/javascript” src=”src/js/jscal2.js”></script>
<script type=”text/javascript” src=”src/js/lang/cn.js”></script>url
2. 代码里面添加spa
<p>htm
<div>
<input type=”text” name = “dt” value = “” id=”calendar-field”/>
</div>
<script type=”text/javascript”>
Calendar.setup({
inputField : “calendar-field”,
trigger : “calendar-field”,
onSelect : function() { this.hide() }
});
</script></p>