发布Hourlog 0.02版: 给日期添加JSCalendar功能


http://www.hetaoblog.com/%E5%8F%91%E5%B8%83hourlog-0-02%E7%89%88-%E7%BB%99%E6%97%A5%E6%9C%9F%E6%B7%BB%E5%8A%A0jscalendar%E5%8A%9F%E8%83%BD/


今天发布了Hourlog 0.02版:给日期添加了JSCalendar功能,就是可以通过弹出层用鼠标来选择日期;

javascript日期我选择了jscalendar, http://www.dynarch.com/projects/calendar/,功能非常强大,而且不依赖于任何框架,使用起来非常舒服,而且也非常小巧;

很可惜,作为菜鸟的我在Hourlog上记录了我添加这个功能花了2个小时时间:
第一步是写个静态页面拷贝sample,用了20分钟左右;
第二步放到项目里面少引用了一个css文件导致显示样式不对,查了约半个小时;
第三步发现我的css里面下面这段和jscalendar有冲突,导致顶部的当前年月和底部的今天字样位置显示不在中间,而是靠左和其他按钮重叠;

* {

margin: 0;
padding: 0;

}

jscalendar主页上下载JSCal2-1.9后,简单的使用如下,具体效果可以登录Hourlog 查看
1. html开头添加

<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>

2. 代码里面添加

<p>

<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>



  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值