JS文件:
function planCycon(){
var selectObj=document.getElementById("planCyc");
var index=selectObj.selectedIndex
var va=selectObj.options[index].value;
if(va=="year"){
year();
}else if(va=="week"){
week();
}else if(va=="month"){
month();
}else if(va=="quarter"){
quarter();
}else if(va=="halfYear")
halfYear();
}
//
//对下拉列表框年的计算!
function year(){
var myDate = new Date();
var year=myDate.getFullYear();
//alert(year); //获取完整的年份(4位,2010)
var timeCyc= document.getElementById("timeCyc");
//var label="<label> 年 ["+year+"-1-1——"+year+"-12-31]</label>"
var label="["+year+"-1-1——"+year+"-12-31]"
timeCyc.innerHTML="<select disabled='disabled'><option>"+year+"</option></select>年";
document.getElementById("starTime").value=year+"/1/1";
document.getElementById("endTime").value=year+"/12/31";
setLabel(label);
}
//
//对下拉列表框周的计算
function week(){
//获取当前系统时间
var myDate = new Date();
var year=myDate.getFullYear(); //获取完整的年份(4位,2010)
//根据两个日期获得间隔多少周
//var t=getweek("2010/1/1",new Date("2010/12/1"));
var t=getweek(year+"/1/1",new Date());
//alert("第"+t+"周");
var timeCyc= document.getElementById("timeCyc");
var selectHTML="";
for(var i=t;i<54;i++){
selectHTML=selectHTML+"<option value='"+i+"'>第"+i+"周</option>";
}
timeCyc.innerHTML="<select id='selectCyc' οnchange='selectCycon()'>"+selectHTML+"</select>";
selectCycon();
}
//获得并显示第几周与7天后的日期
function selectCycon(){
var selectObj=document.getElementById("selectCyc");
var index=selectObj.selectedIndex
var timeValue=selectObj.options[index].value;
var myDate = new Date();
var year=myDate.getFullYear();
//通过getXDate(year,第几周,星期几)方法得到第几周的具体日期
var nowyear=getXDate(year,timeValue,1).getFullYear();
var nowmonth=getXDate(year,timeValue,1).getMonth();
var nowdate=getXDate(year,timeValue,1).getDate();
//在得到的具体日期上加上7天
var date7=new Date(nowyear,nowmonth+1,String(nowdate+7));
//拼写显示字符串
var label="["+nowyear+"-"+(nowmonth+1)+"-"+nowdate+"——"+date7.getFullYear()+"-"+date7.getMonth()+"-"+date7.getDate()+"]"
document.getElementById("starTime").value=nowyear+"/"+(nowmonth+1)+"/"+nowdate;
document.getElementById("endTime").value=date7.getFullYear()+"/"+date7.getMonth()+"/"+date7.getDate();
setLabel(label);
}
//根据两个时间的差获得中间间隔多少个周,在初始第一周时不满一周也按1周计算。
//供前端的week(),selectCycon()方法使用。
function getweek(a,b)
{
var d1=new Date(a).getTime();
var d2=new Date(b).getTime();
if(d1>d2)
{
d1=d1+d2;
d2=d1-d2;
d1=d1-d2;
}
var differday=((d2-d1)/1000/3600/24);
var d=new Date(d1).getDay();
if(d!=0)
{
differday=differday+d;
}
if(differday%7==0)
{
differday+=7;
}
return Math.ceil(differday/7);
}
//通过getXDate(year,weeks,weekDay)和getNextDate(nowDate,weekDay)得到
//这个方法将取得某年(year)第几周(weeks)的星期几(weekDay)的日期
//供selectCycon()方法调用
function getXDate(year,weeks,weekDay){
//用指定的年构造一个日期对象,并将日期设置成这个年的1月1日
//因为计算机中的月份是从0开始的,所以有如下的构造方法
var date = new Date(year,"0","1");
//取得这个日期对象 date 的长整形时间 time
var time = date.getTime();
//将这个长整形时间加上第N周的时间偏移
//因为第一周就是当前周,所以有:weeks-1,以此类推
//7*24*3600000 是一星期的时间毫秒数,(JS中的日期精确到毫秒)
time+=(weeks-1)*7*24*3600000;
//为日期对象 date 重新设置成时间 time
date.setTime(time);
return getNextDate(date,weekDay);
}
//这个方法将取得 某日期(nowDate) 所在周的星期几(weekDay)的日期
function getNextDate(nowDate,weekDay){
//0是星期日,1是星期一,...
weekDay%=7;
var day = nowDate.getDay();
var time = nowDate.getTime();
var sub = weekDay-day;
time+=sub*24*3600000;
nowDate.setTime(time);
return nowDate;
}
//根据两个时间的差获得中间间隔多少个周,在初始第一周时不满一周也按0周计算。
//没有用到此方法,可用于后端维护使用
function show()
{
var CheckDate=new Date("2010",String(4-1),"28");
var yearBegin=new Date(2010,0,0);
alert(Math.floor(((CheckDate-yearBegin)/86400000+parseInt(("0654321".charAt(CheckDate.getDay()))))/7))
}
//
//月的计算
function month(){
//alert("月的操作!");
var myDate = new Date(new Date().getFullYear(),new Date().getMonth()+1,new Date().getDate());
var month=myDate.getMonth();
var timeCyc= document.getElementById("timeCyc");
var selectHTML="";
for(var i=month;i<=12;i++){
selectHTML=selectHTML+"<option value='"+i+"'>"+i+"月</option>";
}
timeCyc.innerHTML="<select id='selectCyc' οnchange='selectmonth()'>"+selectHTML+"</select>";
selectmonth();
}
function selectmonth(){
var selectObj=document.getElementById("selectCyc");
var index=selectObj.selectedIndex
var timeValue=selectObj.options[index].value;
var date1=new Date(new Date().getFullYear(),(timeValue-1),String(1));
var dateyear=date1.getFullYear();
var datemonth=date1.getMonth();
var datedate=date1.getDate();
//alert(date1.getMonth());
var date2=new Date(dateyear,datemonth+1,datedate-1);
//对日期月份操作时,月份从0月开始计算
var label="["+dateyear+"-"+(datemonth+1)+"-"+datedate+"——"+date2.getFullYear()+"-"+(date2.getMonth()+1)+"-"+date2.getDate()+"]"
document.getElementById("starTime").value=dateyear+"/"+(datemonth+1)+"/"+datedate;
document.getElementById("endTime").value=date2.getFullYear()+"/"+(date2.getMonth()+1)+"/"+date2.getDate();
setLabel(label);
}
//
//季度操作
function quarter(){
//alert("季度操作!");
var timeCyc= document.getElementById("timeCyc");
var qDate=new Date();
var qMonth=qDate.getMonth();
if(qMonth<3){
alert("第一季度");
var selectHTML="";
for(var i=1;i<=4;i++){
selectHTML=selectHTML+"<option value='"+i+"'>第"+i+"季度</option>";
}
timeCyc.innerHTML="<select id='selectCyc' οnchange='selectquarter()'>"+selectHTML+"</select>";
selectquarter();
}else if(qMonth>2&&qMonth<6){
var selectHTML="";
for(var i=2;i<=4;i++){
selectHTML=selectHTML+"<option value='"+i+"'>第"+i+"季度</option>";
}
timeCyc.innerHTML="<select id='selectCyc' οnchange='selectquarter()'>"+selectHTML+"</select>";
selectquarter();
}else if(qMonth>5&&qMonth<9){
var selectHTML="";
for(var i=3;i<=4;i++){
selectHTML=selectHTML+"<option value='"+i+"'>第"+i+"季度</option>";
}
timeCyc.innerHTML="<select id='selectCyc' οnchange='selectquarter()'>"+selectHTML+"</select>";
selectquarter();
}else if(qMonth>8){
var selectHTML="";
for(var i=4;i<=4;i++){
selectHTML=selectHTML+"<option value='"+i+"'>第"+i+"季度</option>";
}
timeCyc.innerHTML="<select id='selectCyc' οnchange='selectquarter()'>"+selectHTML+"</select>";
selectquarter();
}
}
function selectquarter(){
var selectObj=document.getElementById("selectCyc");
var index=selectObj.selectedIndex
var timeValue=selectObj.options[index].value;
var myDate = new Date();
var label="";
if(timeValue==1){
label=label+"["+myDate.getFullYear()+"-1-1——"+myDate.getFullYear()+"-3-31]";
document.getElementById("starTime").value=myDate.getFullYear()+"/1/1";
document.getElementById("endTime").value=myDate.getFullYear()+"/3/31";
setLabel(label);
}else if(timeValue==2){
label=label+"["+myDate.getFullYear()+"-4-1——"+myDate.getFullYear()+"-6-30]";
document.getElementById("starTime").value=myDate.getFullYear()+"/4/1";
document.getElementById("endTime").value=myDate.getFullYear()+"/6/30";
setLabel(label);
}else if(timeValue==3){
label=label+"["+myDate.getFullYear()+"-7-1——"+myDate.getFullYear()+"-9-30]";
document.getElementById("starTime").value=myDate.getFullYear()+"/7/1";
document.getElementById("endTime").value=myDate.getFullYear()+"/9/30";
setLabel(label);
}else if(timeValue==4){
label=label+"["+myDate.getFullYear()+"-10-1——"+myDate.getFullYear()+"-12-31]";
document.getElementById("starTime").value=myDate.getFullYear()+"/10/1";
document.getElementById("endTime").value=myDate.getFullYear()+"/12/31";
setLabel(label);
}
}
/
//半年计划
function halfYear(){
//alert("半年计划!");
var timeCyc= document.getElementById("timeCyc");
var hDate=new Date();
var hMonth=hDate.getMonth();
if(hMonth<6){
var selectHTML="";
selectHTML=selectHTML+"<option value='"+1+"'>上半年</option>";
selectHTML=selectHTML+"<option value='"+2+"'>下半年</option>";
timeCyc.innerHTML="<select id='selectCyc' οnchange='selecthalfYear()'>"+selectHTML+"</select>";
selecthalfYear();
}else{
var selectHTML="";
selectHTML=selectHTML+"<option value='"+2+"'>下半年</option>";
timeCyc.innerHTML="<select id='selectCyc' οnchange='selecthalfYear()'>"+selectHTML+"</select>";
selecthalfYear();
}
}
function selecthalfYear(){
var selectObj=document.getElementById("selectCyc");
var index=selectObj.selectedIndex
var timeValue=selectObj.options[index].value;
var myDate = new Date();
var label="";
if(timeValue==1){
label=label+"["+myDate.getFullYear()+"-1-1——"+myDate.getFullYear()+"-6-30]";
document.getElementById("starTime").value=myDate.getFullYear()+"/1/1";
document.getElementById("endTime").value=myDate.getFullYear()+"/6/30";
setLabel(label);
}else if(timeValue==2){
label=label+"["+myDate.getFullYear()+"-7-1——"+myDate.getFullYear()+"-12-31]";
document.getElementById("starTime").value=myDate.getFullYear()+"/7/1";
document.getElementById("endTime").value=myDate.getFullYear()+"/12/31";
setLabel(label);
}
}
///
//显示时间的间隔的label
function setLabel(label){
document.getElementById("showTime").innerHTML=label;
}
JSP:文件
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>planEnact</title>
<jsp:include page="/common/jsp/meta.jsp" />
<script type='text/javascript' src="planEnact.js"></script>
<link type="text/css" href="/common/js/jquery/jquery.ui.all.css" rel="stylesheet" />
</head>
<body>
<form action="" name="f0">
<table border="0">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>计划标题:</td>
<td colspan="4"><input type="text" name="planTitle" id="planTitle" class="text_short" style="width:80%;"/><font color="red">*</font></td>
<td></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td></td>
</tr>
<tr>
<td align="right">计划类型:</td>
<td><select name="planType" id="planType" οnchange="selecton()">
<option id="type" value="0">-请选择-</option>
</select><font color="red">*</font></td>
<td align="right">计划周期:</td>
<td align="left"><select name="planCyc" id="planCyc" οnchange="planCycon()">
<option id="cyc" value="0">-请选择-</option>
<option id="cyc" value="week">周计划</option>
<option id="cyc" value="month">月计划</option>
<option id="cyc" value="quarter">季度计划</option>
<option id="cyc" value="halfYear">半年计划</option>
<option id="cyc" value="year">年计划</option>
</select><font color="red">*</font></td>
<td colspan="2"><span id="timeCyc"></span> <label id="showTime" name="showTime"></label>
<input type="hidden" id="starTime" name="starTime">
<input type="hidden" id="endTime" name="endTime">
</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="2"><button name="topCycContent" οnclick="topCyc()" class="ButtonCss">上个周期的计划内容</button></td>
<td colspan="2"><button name="topCycSum" οnclick="planTopSum()" class="ButtonCss">上个周期的计划总结</button></td>
<td><button name="planCommit" οnclick="check()" class="ButtonCss">提交计划</button>
</td>
<td></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="2">计划内容<font color="red">*</font></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="5"><div id="planList"></div>
<div id="planDiv" style="">
<input type="hidden" id="count">
</div>
</table>
</form>
</body>
</html>
希望这些能对大家有所帮助!