选择年，自动填入开始日期和结束日期，选择月，自动填入月开始日期和月结束日期，这么怎么实现，实现了多放分！！！

<html>
<head>
<title>年月日三下拉框联动</title>
<meta http-equiv='Content-Type' content='text/html; charset=gb2312'>
<meta name='author' content='F.R.Huang(meizz梅花雪)//www.meizz.com'>
</head><body>
<form name=form1>
  <select name=YYYY onchange="YYYYDD(this.value)">
    <option value="">请选择 年</option>
  </select>
  <select name=MM   onchange="MMDD(this.value)">
    <option value="">选择 月</option>
  </select>
  <select name=DD>
    <option value="">选择 日</option>
  </select>
</form><script language="JavaScript"><!--
function YYYYMMDDstart()
{
    MonHead = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];    //先给年下拉框赋内容
    var y   = new Date().getFullYear();
    for (var i = (y-30); i < (y+30); i++) //以今年为准，前30年，后30年
        document.form1.YYYY.options.add(new Option(" "+ i +" 年", i));    //赋月份的下拉框
    for (var i = 1; i < 13; i++)
        document.form1.MM.options.add(new Option(" " + i + " 月", i));    document.form1.YYYY.value = y;
    document.form1.MM.value = new Date().getMonth() + 1;
    var n = MonHead[new Date().getMonth()];
    if (new Date().getMonth() ==1 && IsPinYear(YYYYvalue)) n++;
        writeDay(n); //赋日期下拉框Author:meizz
    document.form1.DD.value = new Date().getDate();
}
if(document.attachEvent)
  window.attachEvent("onload", YYYYMMDDstart);
else
  window.addEventListener('load', YYYYMMDDstart, false);
function YYYYDD(str) //年发生变化时日期发生变化(主要是判断闰平年)
{
    var MMvalue = document.form1.MM.options[document.form1.MM.selectedIndex].value;
    if (MMvalue == ""){ var e = document.form1.DD; optionsClear(e); return;}
    var n = MonHead[MMvalue - 1];
    if (MMvalue ==2 && IsPinYear(str)) n++;
        writeDay(n)
}
function MMDD(str)  //月发生变化时日期联动
{
    var YYYYvalue = document.form1.YYYY.options[document.form1.YYYY.selectedIndex].value;
    if (YYYYvalue == ""){ var e = document.form1.DD; optionsClear(e); return;}
    var n = MonHead[str - 1];
    if (str ==2 && IsPinYear(YYYYvalue)) n++;
        writeDay(n)
}
function writeDay(n)  //据条件写日期的下拉框
{
    var e = document.form1.DD; optionsClear(e);
    for (var i=1; i<(n+1); i++)
        e.options.add(new Option(" "+ i + " 日", i));
}
function IsPinYear(year)//判断是否闰平年
{   return(0 == year%4 && (year%100 !=0 || year%400 == 0));}
function optionsClear(e)
{
    e.options.length = 1;
}
//--></script>
</body>
</html>

解决方案 »

  1.   

    这里也有一个，
    加了一点小功能：
    1.月份改变时，日期值只在需要时改变
    2.增加了后退到本页时，上次选的值还能保证的功能<html><head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>年月日Select</title>
    </head><body onload="changeDays();">
    <form action="" method=get>
    年月日选择框:<br>
    <select name=year onchange="changeDays()" >
      <option value=2000>2000<option value=2001>2001<option value=2002>2002<option value=2003>2003
    </select>
    <select name=month onchange="changeDays()">      
      <option value=0>1<option value=1>2<option value=2>3<option value=3>4<option value=11>12
    </select>
    <select name=day >      
      <option value=1>1
      <option value=2>2
      <option value=3>3
      <option value=4>4
      <option value=5>5
      <option value=6>6
      <option value=7>7
      <option value=8>8
      <option value=9>9
      <option value=10>10
      <option value=11>11
      <option value=12>12
      <option value=13>13
      <option value=14>14
      <option value=15>15
      <option value=16>16
      <option value=17>17
      <option value=18>18
      <option value=19>19
      <option value=20>20
      <option value=21>21
      <option value=22>22
      <option value=23>23
      <option value=24>24
      <option value=25>25
      <option value=26>26
      <option value=27>27
      <option value=28>28
      <option value=29>29
      <option value=30>30
      <option value=31>31
    </select><br>
    <a href="about:blank">about:blank</a><br>
    注：后退到本页面时，下拉框的内容会保持旧有内容<br>
    </form>
    </body></html>
    <script language=javascript>
    function changeDays()
    {
      var theMonthDays=(new Date(document.all.year.value,document.all.month.value*1+1,0)).getDate(); //得到该月份的天数
      if(document.all.day.value>theMonthDays)
        document.all.day.value=theMonthDays;   //如果日期过大，则选择最大可能日期
      for(var i=document.all.day.length+1;i<=theMonthDays;i++)  //加上不足的天option
      {
        var newOption=new Option(i,i);  
        document.all.day.add(newOption);  
      }
      document.all.day.length=theMonthDays;
    }
    </script>
      

  2.   

    专为你量身订做的,看行不行<html>
    <head>
    <script language="JavaScript">
    <!--
    var lastIndex=0;//记录最后选择的标志
    var gYear = -1;
    var gMonth = -1;function initDlt(index){
    lastIndex=index; var arrJidu=["第一季度","第二季度","第三季度","第四季度"];
    var arrXun=["上旬","中旬","下旬"]; switch(index){
    case 1: initDltByArea(2000,2050); break;
    case 2: initDltByArray(arrJidu); break;
    case 3: initDltByArea(1,12); break;
    case 4: initDltByArray(arrXun); break;
    case 5: initDltByArea(1,52); break;
    default: break;
    }
    }function initDltByArea(min,max){
    var dlt=document.getElementById("dltChoose");
    dlt.innerHTML="";
    for(var i=min,I=max+1;i<I;i++){
    var opt= document.createElement("OPTION");
    opt.value=i;
    opt.text=i;
    dlt.add(opt);
    }
    dlt.value="";
    dlt.focus();
    }function initDltByArray(arr){
    var dlt=document.getElementById("dltChoose");
    dlt.innerHTML="";
    var len=arr.length;
    for (var i=0; i<len; i++){
    var opt= document.createElement("OPTION");
    opt.value=i;
    opt.text=arr[i];
    dlt.add(opt);
    }
    dlt.value="";
    dlt.focus();
    }function doDltChg(objDlt){
    var index=lastIndex;
    switch(index){
    case 1: yearChange(objDlt); break;
    case 2: jiduChange(objDlt); break;
    case 3: monthChange(objDlt); break;
    case 4: xunChange(objDlt); break;
    case 5: weekChange(objDlt); break;
    default: break;
    }
    }function yearChange(objDlt){
    gYear=objDlt.value;
    var d1 = new Date(gYear,0,1);
    var d2 = new Date(gYear,11,31,23,59,59,999);
    outResult(d1,d2);
    }function jiduChange(objDlt){
    if(gYear == 0){
    alert("请先选择年!");
    return false;
    }
    var year=gYear;
    var minMon=(objDlt.value*3);
    var maxMon=(objDlt.value*3)+2;
    var endDayOfMonth=CalDays(year,maxMon+1); var d1 = new Date(year,minMon,1);
    var d2 = new Date(year,maxMon,endDayOfMonth,23,59,59,999);
    outResult(d1,d2);
    }function monthChange(objDlt){
    if(gYear < 0){
    alert("请先选择年!");
    return false;
    }
    gMonth=objDlt.value-1;
    var year=gYear;
    var endDayOfMonth=CalDays(year,gMonth+1); var d1 = new Date(year,gMonth,1);
    var d2 = new Date(year,gMonth,endDayOfMonth,23,59,59,999);
    outResult(d1,d2);
    }function xunChange(objDlt){
    if(gYear < 0){
    alert("请先选择年!");
    return false;
    }
    if(gMonth < 0){
    alert("请先选择月!");
    return false;
    }
    var year=gYear;
    var month=gMonth;
    var val=objDlt.value;
    var beginDayOfMonth=val*10+1;
    var endDayOfMonth = (val==2?CalDays(year,month+1):(val*10+10)); var d1 = new Date(year,month,beginDayOfMonth);
    var d2 = new Date(year,month,endDayOfMonth,23,59,59,999);
    outResult(d1,d2);
    }function weekChange(objDlt){
    if(gYear < 0){
    alert("请先选择年!");
    return false;
    }
    var year=gYear;
    var resultFun = calAreaByYearWeek(year,objDlt.value);

    var d1=resultFun.getDateBegin();
    var d2=resultFun.getDateEnd();
    //var d1 = new Date(year,gMonth,1);
    //var d2 = new Date(year,month,endDayOfMonth,23,59,59,999);
    outResult(d1,d2);}function outResult(date1,date2){
    var txtBegin=document.getElementById("dateBegin");
    var txtEnd=document.getElementById("dateEnd");
    txtBegin.value=mkStringFromDate(date1);
    txtEnd.value=mkStringFromDate(date2);}function mkStringFromDate(date){
    var mil = format1(date.getMilliseconds());
    return format(date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate()+" "+date.getHours()+":"+date.getMinutes()+":"+date.getSeconds())+"."+mil;
    }function format(str){
    return str.replace(/(\D)(\d)(?=\D|$)/g, "$10$2");
    }function format1(num){
    if(num<10) return "00"+num;
    else if(num<100) return "0"+num;
    else return num.toString();
    }function CalDays(year,mon){
    var date= new Date(year,mon,0);
    return date.getDate();}
    /*功能:根据年份和周数返回该周的起始日期和结束日期
     *名称:
     *参数:
      year:年份
      numWeek:第几周
     *返回值:doubleDate对象
     */
    function calAreaByYearWeek(year,numWeek){
    var date = new Date(year,0,1);
    var ww = (7-date.getDay())%7;//计算第一周前的天数
    var date = date.valueOf();
    var dateBegin = date+((numWeek-1)*7+ww)*24*3600*1000;
    var dateEnd = date+(((numWeek)*7+ww)*24*3600*1000-1);
    dateBegin = new Date(dateBegin);
    dateEnd = new Date(dateEnd);
    var dd= new doubleDate();
    dd.setDateBegin(dateBegin);
    dd.setDateEnd(dateEnd);
    return dd;
    }
    function doubleDate(){ 
    this.dateBegin=null; 
    this.dateEnd=null;
    this.getDateBegin=function (){
    return this.dateBegin;
    };
    this.getDateEnd=function (){
    return this.dateEnd;
    };
    this.setDateBegin=function (date){
    this.dateBegin=date;
    };
    this.setDateEnd=function (date){
    this.dateEnd=date;
    };
    }
    //-->
    </script>
    </head>
    <body>
    <table style="width:600;border-collapse :collapse" cellpadding=0 cellspacing=0 border=1>
    <tr height="30">
    <td colspan=2 align="center">
    <input type="button" value="年" style="width:40" onclick="initDlt(1);">&nbsp;
    <input type="button" value="季" style="width:40" onclick="initDlt(2);">&nbsp;
    <input type="button" value="月" style="width:40" onclick="initDlt(3);">&nbsp;
    <input type="button" value="旬" style="width:40" onclick="initDlt(4);">&nbsp;
    <input type="button" value="周" style="width:40" onclick="initDlt(5);">&nbsp;
    </td>
    <td></td>
    </tr>
    <tr height="30">
    <td colspan=2 align="center">
    <select id="dltChoose" onchange="doDltChg(this)"></select>
    </td>
    </tr>
    <tr height="30">
    <td width="50%"><input type="text" id="dateBegin" style="width:100%;readonly:true" value="00-00-00 00:00:00.000"></td>
    <td width="50%"><input type="text" id="dateEnd" style="width:100%;readonly:true" value="00-00-00 00:00:00.000"></td>
    </tr>
    </table>
    </body>
    </html>
      

  3.   

    回复人： zhaoxiaoyang(梅雪香@深圳) ( ) 信誉：100  2005-10-27 17:15:00  得分: 0  -------
    第一次看到这么具有创意的示例
    －－－－－捊须而笑
      

  4.   

    JK_10000(JK) ( ) 信誉：121 有创意?什么意思?
      

  5.   

    我分析了一下,能够选择的流程很简单:
    年->季
    年->月
    年->周
    年->月->旬
    目的只是生成一个时间段,也就是构成时间段的两个时间字符串,这样的东西一般可以用来查询报表.本想做一个大表格一路可以选择下去,但考虑到这可能只是表单里很小的一部分内容(报表可能有其它查询条件的),不宜占用面积过大.所以设计这个比较精简的方式,可以再加上button的disabled属性的控制,可能更理性一些
      

  6.   

    楼主说的，不一定是楼主想要的如果这样"这样的目的为了规范日期的输入"
    可以参考：
    http://jkisjk.vip.sina.com/html/AttachEventWithJs.htm空间已经过期
    代码仅作演示
      

  7.   

    To: Edwingu(我女朋友喜欢吃苏丹红) 你说的问题确实存在,因为楼主要东西我需要现写的,没有做那些验证,急着回啊,后来我自己加上的流程控制的语句了,如下:
    在 function doDltChg(objDlt)中加上以下代码就行了 switch(index){
    case 1: 
    btns[1].disabled=false;
    btns[2].disabled=false;
    btns[4].disabled=false;
    break;
    case 3: 
    btns[3].disabled=false;
    break; case 2:
    case 5:
    btns[3].disabled=true;
    break;
    default: break;
    }
      

  8.   

    回复人： dreamover(梦醒了) ( ) 信誉：100  2005-10-28 15:19:00  得分: 0  
    --
    alert("2005-02月份的最后一天是"+(new Date(2005,2,0)))
      

  9.   

    To  dreamover(梦醒了) 
    时间段的结束时间不是减一天,而是减1毫秒要是用下一段的开始时间就要先转成毫秒值,再减1,再转成日期类型,程序可能精减了,但要进行的运算更多,效率反而下降了
      

  10.   

    to zhaoxiaoyang(梅雪香@深圳)我说的减一天，只是泛指，这个当然要看你的需要看减多少
    至于效率问题，在判断月份天数的时候，这种方法要用Date对像的运算，效率可能是差一些，但我觉得在有些需要复杂判断的时候，如判断季度，星期啊什么的，我觉得这种方法更不容易出错，而且效率可能就不差那么多了，另外，计算机中本来就是用毫秒数来存储时间的，这个转换我觉得效率损失不会太大。
      

  11.   

    谢谢楼上各位的解答，我是这样的我有一个页面，有三个 字段，分别是    计划时间类别(dType)，计划时间开始(stime)，和计划时间结束(etime)原来设计是  点 “时间类别” 旁边的图标，弹出一个 模式窗体, 列出 “年” “季” “月” “周” “旬” “日” 六个值的 一级树形菜单，确定保存后，再通过  点 “时间开始”和“时间结束” 旁边的图标，调出日期控件(网上找的)，进行开始时间和结束时间的选择但 有的用户在 选择 “时间类别”，比如 一“月”计划时，偏偏选择 1月1日到1月 29日，现在我得规范这个开始日期和结束日期的录入，不能让他随便选，因为这些日期的开始和时间的准确选择，对以后模块的数据抓取很关键因为那个时间控件不好改，所以我才有了上面的需求再次谢谢
      

  12.   

    有需求要早说,回了这么长你才说太晚啦
    如果只是选两个时间就要再开个什么窗口,那可操作性太差了
    如果是月选择,那就只让用户选择到月,其它由程序来处理就好了,让用户选,就有可能错,要是月再选错,谁也没有办法了.
    反正流程只有我上面列的几种,让他先选个流程,然后你来初始化select对象,可以不用一个.
    尽量减少用户的操作量,用户才可能满意.
      

  13.   

    @ zhaoxiaoyang(梅雪香@深圳) 
     
      开窗口是为了选择那个计划时间的类别，其实用下拉选择也行
      
       主要是在选择 “年” “月” “季”等这些计划时，是不允许用户出错的~~    PS.很感谢你的热心帮助，做为一名菜鸟，你是我学习的榜样 ^_^