您的位置:知蚁博客 » 程序设计 » JQuery Datepicker实现JavaScript日期相减的小例子

JQuery Datepicker实现JavaScript日期相减的小例子

作者: 发布时间:2011-03-26 分类:程序设计 标签: 5,036人浏览

  最近水母一直在发关于银行利息的文章,看他算得连脚趾头都快用上了,O(∩_∩)O哈哈~,索性做回好人,帮他写个网页程序算一下。

  开始想用PHP写,但是还要做个输入界面,干脆用js了。写js代码的好帮手首选JQuery,于是到JQuery官方网站(http://jquery.com/)上下了个v1.5.1最新版的文件,瞬间就下下来了。然后想到JQuery UI中有个Datepicker还从来没用过,⊙﹏⊙b汗!于是点到http://jqueryui.com/download页面随便选了个Theme,把1.8.11版本里的所有Components都下载了下来,下下来是个zip包,解出来以后的文件夹名称是jquery-ui-1.8.11.custom。

  新建html文件,拖2个input和1个button,将jquery-ui-1.8.11.custom\js下的2个文件jquery-1.5.1.min.js和jquery-ui-1.8.11.custom.min.js包含进来,就可以用JQuery的datepicker了。

  初始化input的js代码如下:

JavaScript语言: 知蚁博客 程序设计
$(document).ready(function() {
  $(“#datepicker_begin”).datepicker({ dateFormat: ‘yy/mm/dd’ });
  $(“#datepicker_end”).datepicker({ dateFormat: ‘yy/mm/dd’ });
});

  然后,button的onclick事件如下:

JavaScript语言: 知蚁博客 程序设计
function countDay(){
var b = new Date($(“#datepicker_begin”).val());
var e = new Date($(“#datepicker_end”).val());
var dif = e.getTime() - b.getTime();
var day = Math.floor(dif / (1000 * 60 * 60 * 24));
day+=1;
$(“#msg”).html(“计算结果:”+day+“天”);
}

  就是将2个日期换算成毫秒,把差值换算成天数。即用input中的日期值实例化个Date,然后用Date的getTime()方法获得该日期距1970.1.1的毫秒数,最后用差值除以1000*60*60*24取整就得到2个日期的天数差了。

  试用了下,功能OK。不过发现datepicker界面上是英文的,看了下网页,说是可以本地化,方法是把jquery-ui-1.8.11.custom\development-bundle\ui\i18n下的jquery.ui.datepicker-zh-CN.js包含到html中来。另外,dateFormat还可以设置成其他显示方式,详情可查看http://docs.jquery.com/UI/Datepicker/formatDate。Datepicker可以显示多个月份,设置最大最小日期,显示周等等,可惜的是没有时分秒啊。

  O(∩_∩)O~,可以拿给水母用了,还顺便学习下了Datepicker。
原创文章请注明转载于知蚁博客,本文地址:http://www.letuknowit.com/archives/17

相关文章

1访客评论

  1. :mrgreen:

    匿名09-27 16:39 回复

我来说说

(必须)

(必须,保密)

你确定你已经看过文章了?
取消

无觅相关文章插件,快速提升流量