JavaScript——搞甘特图使用 Date 对象时遇到的问题

本文内容

  • Date 对象构造方法
  • Date 对象方法
  • 演示 Date 对象
  • 参考资料

前段时间,用 htmlxgantt 做甘特图,其中,从数据库里读出的日期格式,是中文习惯的数字年月日,用 new Date(yyyy,mm,dd) 构造日期对象,可是甘特图显示出来的时候,发现全都多了一个月。也就是说,若日期是 2012-10-1,则甘特图确认的日期是 2012-2-1;最“受不了”的是,若日期是 2012-12-1,则甘特图确认的日期是 2013-0-1。以前还真没意识、注意到这些,觉得无非就是 JavaScript 的一个对象而已,于是就查了点资料,研究了一下。

起初,只是简单以为项目计划或生产计划嘛,提前一个月制定,也合理啊。现在看来,哇,这个解释太荒唐、太牵强,完全没道理,反问一下,为什么非要一个月?两个月不行吗?——其实,完全不那么回事!魔鬼的魅力在于细节。

Date 对象构造方法


JavaScript Date 对象的构造方法如下所示:

new Date("month dd,yyyy hh:mi:ss");
new Date("month dd,yyyy");
new Date(yyyy,month,dd,hh,mi,ss);
new Date(yyyy,month,dd);
new Date(ms);

说明:

  • 参数可以是英文习惯的“月 日,年 时:分:秒”,其中,“时:分:秒”可选。而“月”,是月份英文或其缩写。
  • 也可以是数字年、月、日、时、分、秒,其中,时分秒可选,以及毫秒。

Date 对象方法


下面是本文需要的 Date 对象的几个方法,特别注意每个方法返回值的范围:

  • getDate() - 从 Date 对象返回一个月中的某一天。范围 1 ~ 31。
  • getDay() - 从 Date 对象返回一周中的某一天。范围 0 ~ 6。
  • getMonth() - 从 Date 对象返回月份。范围 0 ~ 11。
  • getFullYear() - 从 Date 对象以四位数字返回年份。
  • getHours() - 返回 Date 对象的小时。范围 0 ~ 23。
  • getMinutes() - 返回 Date 对象的分钟。范围 0 ~ 59。
  • getSeconds() - 返回 Date 对象的秒数。范围 0 ~ 59。
  • getMilliseconds() - 返回 Date 对象的毫秒。范围 0 ~ 999。
  • getTime() - 返回 1970 年 1 月 1 日至今的毫秒数。

注意:getMonth() 的返回值是从 0 到 11。

演示 Date 对象


下面代码演示当前日期,以及用几种参数形式构造 Date 对象,如下 JavaScript 代码所示:

var weeks = ["星期一", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
var monthName = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
var monthShortName = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
var dStr = undefined;
 
var date1 = new Date();
var date2 = new Date("December 22,2012");
var date3 = new Date("November 22,2012");
var date4 = new Date("Dec 22,2012");
var date5 = new Date("Dec 22,2012 21:19:35");
var date6 = new Date(2012, 11, 22);
var date7 = new Date(2012, 12, 22);
var date8 = new Date(2012, 12, 22, 21, 19, 35);
var date9 = new Date(date6.getTime());
 
dStr = date1.getFullYear() + "年" + date1.getMonth() + "月" + date1.getDate() + "日";
dStr += date1.getHours() + ":" + date1.getMinutes() + ":" + date1.getSeconds() + " " + weeks[date1.getDay()];
document.write("date1=" + dStr + "<br />");
document.write("date2=" + date2.getFullYear() + "年" + date2.getMonth() + "月" + date2.getDate() + "日" + "<br />");
document.write("date3=" + date3.getFullYear() + "年" + date3.getMonth() + "月" + date3.getDate() + "日" + "<br />");
document.write("date4=" + date4.getFullYear() + "年" + date4.getMonth() + "月" + date4.getDate() + "日" + "<br />");
document.write("date5=" + date5.getFullYear() + "年" + date5.getMonth() + "月" + date5.getDate() + "日" + "<br />");
document.write("<br />");
document.write("date6=" + date6.getFullYear() + "年" + date6.getMonth() + "月" + date6.getDate() + "日" + "<br />");
document.write("date7=" + date7.getFullYear() + "年" + date7.getMonth() + "月" + date7.getDate() + "日" + "<br />");
document.write("date8=" + date8.getFullYear() + "年" + date8.getMonth() + "月" + date8.getDate() + "日" + "<br />");
document.write("date9=" + date9.getFullYear() + "年" + date9.getMonth() + "月" + date9.getDate() + "日" + "<br />");

结果:

date1=2012年11月15日20:6:49 星期六
date2=2012年12月22日
date3=2012年11月22日
date4=2012年12月22日
date5=2012年12月22日
 
date6=2012年11月22日
date7=2013年0月22日
date8=2013年0月22日
date9=2012年11月22日

说明:

  • 当使用英文习惯构造 Date 对象时,上面代码变量 date2 ~ date5,显示结果与实际的预期一致。
  • 可用中文习惯的数字年月日时分秒,或是无参构造方法,创建 Date 对象时,显示结果与预期差一个月。因为,实际中,我们数月份不能从 0 开始,但是 JavaScript 却是从 0 开始。如 date6 变量,如果只按字面解释,若构造时月为 11,则结果与构造时一致,此时月的值,没有超过 JavaScript 的规定;若构造时月为 12,而年为 2012,则年会下一年 2013,而月为 0。估计,无论是从字面,还是从实际,显示都跟预期不一致。

因此,编程中应该注意,何时用 getMonth()+1,或 getMonth()-1,以及数据库中日期字段格式化成什么比较合适。

参考资料


下载 Demo

也可以访问 http://jsfiddle.net/liuning800203/73WuT/embedded/result/,jsfiddle 在线编辑。

posted @ 2012-12-15 20:32  船长&CAP  阅读(...)  评论(... 编辑 收藏
免费流量统计软件