我一直在为一家保险公司处理申请表。他们卖旅游保险。
作为一个额外的小功能,他们要求我获取用户输入的出发日期和返回日期,计算它们之间的天数,然后在“天数”框中显示数字。其目标是让用户可以输入两个日期并自动计算天数。
我已经创建了一个可以正确计算日期的函数,并且我已经使用手动分配的日期值对其进行了测试。
使用 JS 日历时出现了我的问题。
我试图做的是使用第二个框的 onblur 来访问该功能并将日期吐出到“天”框中。我很快意识到 onblur 是在 JS 日历的代码输入日期之前触发的,因此该函数没有日期并且该函数不会运行。
然后我尝试使用 onchange 并意识到它也不起作用,因为用户实际上并没有更改日期,代码是。
所以我接下来尝试做的是使用间隔来触发该功能,这就是我遇到问题的地方。
下面是我的 caldate.js 文件中的代码,该文件附加到我的 HTML 表单中。
var namestart = new Array ();
namestart[0] = "trav_emer_single_date_go";
namestart[1] = "trav_emer_extend_date_go";
namestart[2] = "allinc_single_date_go";
namestart[3] = "allinc_annual_date_go";
namestart[4] = "cancel_date_go";
namestart[5] = "visitor_supervisa_date_go";
namestart[6] = "visitor_student_date_go";
namestart[7] = "visitor_xpat_date_go";
var namend = new Array ();
namend[0] = "trav_emer_single_date_ba";
namend[1] = "trav_emer_extend_date_ba";
namend[2] = "allinc_single_date_ba";
namend[3] = "allinc_annual_date_ba";
namend[4] = "cancel_date_ba";
namend[5] = "visitor_supervisa_date_ba";
namend[6] = "visitor_student_date_ba";
namend[7] = "visitor_xpat_date_ba";
var names = new Array ();
names[0] = "trav_emer_single_days";
names[1] = "trav_emer_extend_days";
names[2] = "allinc_single_days";
names[3] = "allinc_annual_days";
names[4] = "cancel_days";
names[5] = "visitor_supervisa_days";
names[6] = "visitor_student_days";
names[7] = "visitor_xpat_days";
function daysBetween() {
for (var i = 0; i < 8; i++) {
//Get the value of the current form elements
var start = document.getElementById(namestart[i]).value;
var end = document.getElementById(namend[i]).value;
//Duration of a day
var d = 1000*60*60*24;
// Split Date one
var x = start.split("-");
// Split Date two
var y = end.split("-");
/// // Set Date one object
var d1 = new Date(x[0],(x[1]-1),x[2]);
// // Set Date two object
var d2 = new Date(y[0],(y[1]-1),y[2]);
//
// //Calculate difference
diff = Math.ceil((d2.getTime()-d1.getTime())/(d));
//Show difference
document.getElementById(names[i]).value = diff;
}
}
function interval() {
var int = setInterval(function(){daysBetween()},500);
}
开头的数组列表是我需要访问的元素的名称。我打算用我的函数做的是在每个间隔运行一个循环来检查所有 8 个元素。namestart[] 和 namend[] 是用户输入的开始和结束日期。names[] 列出要显示日期的框的名称。
我什至无法测试间隔部分,因为daysBetween()
出于测试目的,我什至无法使用手动分配的 value="date" 运行一次,它根本不会运行。
这个问题真的很简单:document.getElementById(namestart[i]).value
不是拉出一个值,它只是挂起脚本,因为它找不到值。我也尝试过使用form_name.elements().value
符号和form_name.element_name.value
符号无济于事。
据我所知代码应该可以工作,我真的很难过,我给出了项目名称的列表,并告诉脚本使用它们来访问它们 - 我使用过并且多次看到工作 getElementByID。
任何帮助将不胜感激,因为我不太确定从这里去哪里。
这里要求的是一个 JS fiddle 链接:http: //jsfiddle.net/L2H9N/ - 纯 JS 没有库。