列表/菜单时间选择问题

打算做一个列表/菜单时间选择，分别是年月日的时间选择，在页面打开初始状态是当天的日期，并可再进行其他日期的选择。请问怎么实现或者是否有相应的控件，请各位高人能详细说明，谢谢：）

解决方案 »

  1.   

    不知道楼主是不是要js的html实现。在下以前写过个东西，你看看能不能帮上些忙，这个是用div写的，有缺点就是在select下方div会被覆盖。原本想用iframe重写，后来计划方案改变，加之项目比较紧张，所以未能实现。
    <HTML>
    <HEAD>
    <TITLE> New Document </TITLE>
    <SCRIPT LANGUAGE="JavaScript">
    <!--/**
     * 创建日历层的核心函数
     * @param Object theTextObject input元素对象
     * @param Number sStartYear    指定起始的年份
     * @param Number sEndYear      指定截止的年份
     * @param Number sStartMonth   指定起始的月份
     * @param Number sEndMonth     指定截止的月份
     */
    function DefineMonthView(theTextObject,sStartYear,sEndYear,sStartMonth,sEndMonth) {  this.startYear=2000;//默认起始年份
      this.endYear=2013;  //默认截止年份
      this.startMonth=1;  //默认起始月份
      this.endMonth=12;   //默认截止月份
      this.Source=theTextObject; //元素对象
      this.yearSelectName="yearSelect";   //年份select元素名
      this.monthSelectName="monthSelect"; //月份select元素名
      this.HeaderStyle = "height:32px; background-color:#E3F0FF;"; //tr元素样式；
      this.Width = 200; //定义月份视图的主体宽度
      this.Height = 40; //定义月份视图的主体高度
      this.MonthGridStyle = "border-width:1px; border-style:solid; border-color:#000000;"; //table元素样式
      this.SubmitButStyle = " font-size:12px; font-family:宋体;background-color:#F2F8FF;";   //button元素样式
    this.ResetButStyle= " font-size:12px; font-family:宋体;background-color:#F2F8FF;";
      this.divID="nego_orange" //div元素id
      this.SubmitButName="submit";  //button元素名称
    this.ResetButName="reset1";
      this.date=new Date();    //获得当前日期对象
      this.selectedYear=this.date.getYear();     //得到当前年份
      this.selectedMonth=this.date.getMonth()+1; //得到当年月份
      this.YearListStyle = "font-size:12px; font-family:宋体;"; //年份select元素样式
      this.MonthListStyle = "font-size:12px; font-family:宋体;"; //月份select元素样式  //如果指定起始年份参数不为空将其设为起始年份
      if(sStartYear!=null) {
        this.startYear=sStartYear;
      }  //如果指定截止年份参数不为空将其设为截止年份
      if(sEndYear!=null) {
        this.endYear=sEndYear;
      }  //如果指定起始月份参数不为空将其设为起始月份
      if(sStartMonth!=null) {
        this.startMonth=sStartMonth;
      }  //如果指定截止月份参数不为空将其设为截止月份
      if(sEndMonth!=null) {
        this.endMonth=sEndMonth;
      }  //从input元素中取值如果是合法年份且在起始年份截止年份，
      //起始月份截止月份以内则默认选中为input元素中的值，
      //否则默认选中值为当前年月
      this.setSelectValue= function() {    var arrayDate=null;
        var tempYear=null;
        var tempMonth=null;
        var regexText=/^\d{1,4}-\d{1,2}$/;
        var tempValue=this.Source.value;    if(regexText.test(tempValue)) {      arrayDate=tempValue.split('-');
          tempYear=parseInt(arrayDate[0],10);
          tempMonth=parseInt(arrayDate[1],10);      if(tempYear<10) {
            tempYear=parseInt((this.startYear.toString().substring(0,3)+tempYear),10);
            if((tempYear>=this.startYear)&&(tempYear<=this.endYear)&&(tempMonth>=this.startMonth)&&(tempMonth<=this.endMonth)) {          this.selectedYear=tempYear;
              this.selectedMonth=tempMonth
            }
          }
          else if(tempYear<100) {
            tempYear=parseInt((this.startYear.toString().substring(0,2)+tempYear),10);        if((tempYear>=this.startYear)&&(tempYear<=this.endYear)&&(tempMonth>=this.startMonth)&&(tempMonth<=this.endMonth)) {          this.selectedYear=tempYear;
              this.selectedMonth=tempMonth
            }
          }
          else if(tempYear<1000) {
            tempYear=parseInt((this.startYear.toString().substring(0,1)+tempYear),10);        if((tempYear>=this.startYear)&&(tempYear<=this.endYear)&&(tempMonth>=this.startMonth)&&(tempMonth<=this.endMonth)) {          this.selectedYear=tempYear;
              this.selectedMonth=tempMonth
            }
          }
          else {
            if((tempYear>=this.startYear)&&(tempYear<=this.endYear)&&(tempMonth>=this.startMonth)&&(tempMonth<=this.endMonth)) {          this.selectedYear=tempYear;
              this.selectedMonth=tempMonth
            }
          }
        }
      } /**
      * 得到年份option字符串的方法
      * @param Number startYear    默认起始年份
      * @param Number endYear      默认截止年份
      * @param Number selectedYear 默认选中年份
      */
      this.getYearOptions= function(startYear,endYear,selectedYear) {    var yearOptionStr="";    for(var i=0;i<=(endYear-startYear);i++) {      if(selectedYear==(startYear+i)) {
            yearOptionStr+="<option value='"+(startYear+i)+"' selected>"+(startYear+i)+"年</option>";
          }
          else {
            yearOptionStr+="<option value='"+(startYear+i)+"'>"+(startYear+i)+"年</option>";
          }
        }
        return yearOptionStr;
      } /**
      * 得到月份option字符串的方法
      * @param Number startYear    默认起始月份
      * @param Number endYear      默认截止月份
      * @param Number selectedYear 默认选中月份
      */
      this.getMonthOptions= function(startMonth,endMonth,selectedMonth) {    var monthOptionStr="";    for(var i=0;i<=(endMonth-startMonth);i++) {      var disMonth=startMonth+i;      if(disMonth<10) {
            if(selectedMonth==(disMonth)) {          monthOptionStr+="<option value='0"+disMonth+"' selected>"+disMonth+"月</option>";
            }
            else {          monthOptionStr+="<option value='0"+disMonth+"'>"+disMonth+"月</option>";
            }
          }
          else {
            if(selectedMonth==(disMonth)) {          monthOptionStr+="<option value='"+disMonth+"' selected>"+disMonth+"月</option>";
            }
            else {
              monthOptionStr+="<option value='"+disMonth+"'>"+disMonth+"月</option>";
            }
          }
        }    return monthOptionStr;
      } /**
      * 得到div元素左侧坐标的函数
      * @param Object theObject  input元素对象
      */
      this.GetoffsetLeft= function(theObject) {    var absLeft = 0;
        var thePosition="";
        var tmpObject = theObject;    while (tmpObject != null) {
          thePosition = tmpObject.position;
          tmpObject.position = "static";
          absLeft += tmpObject.offsetLeft;
          tmpObject.position = thePosition;
          tmpObject = tmpObject.offsetParent;
        }    return absLeft;
      } /**
      * 得到div元素顶部坐标的函数
      * @param Object theObject  input元素对象
      */
      this.GetoffsetTop= function(theObject) {    var absTop = 0;
        var thePosition = "";
        var tmpObject = theObject;    while (tmpObject != null) {      thePosition = tmpObject.position;
          tmpObject.position = "static";
          absTop += tmpObject.offsetTop;
          tmpObject.position = thePosition;
          tmpObject = tmpObject.offsetParent;
        }    return absTop;
      }
      

  2.   

    /**
      * 删除div的函数
      */
      this.DeleteMonthGrid= function() {    var theDivObject = document.all.item(this.divID);    if (theDivObject == null) {
          return;
        }    var tmpObject = document.activeElement;    while (tmpObject != null) {
          if (tmpObject == this.Source) {
            return;
          }
          if (tmpObject.id == this.yearSelectName) {
            return;
          }
          if (tmpObject.id == this.monthSelectName) {
            return;
          }
          if (tmpObject.id == this.SubmitButName) {
          var theDivObject = document.all.item(this.divID);
          yearSelectObj=document.all[this.yearSelectName];
          monthSelectObj=document.all[this.monthSelectName];      this.Source.value=yearSelectObj.options[yearSelectObj.selectedIndex].value+
          "-"+monthSelectObj.options[monthSelectObj.selectedIndex].value;      theDivObject.outerHTML="";
          this.Source = null;
    return;
    }
    if (tmpObject.id == this.ResetButName){
    this.Source.value="";
    theDivObject.outerHTML="";      this.Source = null;
    return;
    }
          tmpObject = tmpObject.parentElement;
        }    if (tmpObject == null) {      theDivObject.outerHTML="";
          this.Source = null;
        }
      }
     /**
      * 初始化div元素的函数
      */
      this.InitialMonthView= function() {    var theDivHTML="";    theDivHTML="<div id='"+this.divID+"' onblur=\"document.jsMonth.DeleteMonthGrid();\" >";
        theDivHTML += " <table width=\"" + this.Width.toString() + "\" height=\"" + this.Height.toString() + "\" style=\"" + this.MonthGridStyle + "\" cellpadding=\"0\" cellspacing=\"0\">";
        theDivHTML += " <tr>";
        theDivHTML += " <td align=\"center\" valign=\"top\">";
        theDivHTML += " <table width=\"100%\" height=\"100%\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\">";
        theDivHTML += " <tr align=\"center\" style=\"" + this.HeaderStyle + "\">";
        theDivHTML += " <td>";
        theDivHTML += " <select id=\"" + this.yearSelectName + "\" style='"+this.YearListStyle+"' tabIndex=\"-1\"  onblur=\"document.jsMonth.DeleteMonthGrid();\">";
        theDivHTML += this.getYearOptions(this.startYear,this.endYear,this.selectedYear);
        theDivHTML += " </select>";
        theDivHTML += " </td>";
        theDivHTML += " <td>";
        theDivHTML += " <select id=\"" + this.monthSelectName + "\" style='"+this.MonthListStyle+"' tabIndex=\"-1\" onblur=\"document.jsMonth.DeleteMonthGrid();\">";
        theDivHTML += this.getMonthOptions(this.startMonth,this.endMonth,this.selectedMonth);
        theDivHTML += " </select>";
        theDivHTML += " </td>";
        theDivHTML += " <td>";
        theDivHTML += " <input type=\"button\" tabIndex=\"-1\" style=\"" + this.ResetButStyle + "\" id=\"" + this.ResetButName+ "\" value=\"重置\" onClick=\"document.jsMonth.DeleteMonthGrid();\" >";
        theDivHTML += " </td>";
        theDivHTML += " <td>";
        theDivHTML += " <input type=\"button\" tabIndex=\"-1\" style=\"" + this.SubmitButStyle + "\" id=\"" + this.SubmitButName+ "\" value=\"确定\" onClick=\"document.jsMonth.DeleteMonthGrid();\" >";
        theDivHTML += " </td>"
        theDivHTML += " </tr>";
        theDivHTML += " </table>";
        theDivHTML += " </td>";
        theDivHTML += " </tr>";
        theDivHTML += " </table>";
        theDivHTML += " </div>";
        document.body.insertAdjacentHTML("beforeEnd", theDivHTML);
        theDivObject = document.all.item(this.divID);
        theDivObject.style.position = "absolute";
        theDivObject.style.posLeft = this.GetoffsetLeft(this.Source);
        theDivObject.style.posTop = this.GetoffsetTop(this.Source) + this.Source.offsetHeight;
      }
    }/**
     * 创建日历层的函数
     * @param Object theTextObject input元素对象
     * @param Number sStartYear    指定起始的年份
     * @param Number sEndYear      指定截止的年份
     * @param Number sStartMonth   指定起始的月份
     * @param Number sEndMonth     指定截止的月份
     */
    function CreateMonthView(theTextObject,sStartYear,sEndYear,sStartMonth,sEndMonth) {  if (document.jsMonth != null) {
        if (document.jsMonth.Source == theTextObject) {
          return;
        }
        else {
          document.jsMonth.DeleteMonthGrid();
        }
      }  document.jsMonth=new DefineMonthView(theTextObject,sStartYear,sEndYear,sStartMonth,sEndMonth);
      document.jsMonth.setSelectValue();
      document.jsMonth.InitialMonthView();
      theTextObject.select();
    }/**
     * 删除日历层的函数
     */
    function DeleteMonthView() {
      if (document.jsMonth == null) {
        return;
      }  document.jsMonth.DeleteMonthGrid();  if (document.jsMonth.Source == null) {
        document.jsMonth = null;
      }
    }//-->
    </SCRIPT>
    </HEAD>
    <BODY>
    <FORM METHOD=POST ACTION="">
    <INPUT TYPE="text" NAME="test" onclick="CreateMonthView(this)">
    </FORM>
    </BODY>
    </HTML>
      

  3.   

    楼主可以看一下这个帖子，js实现的日历
    http://community.csdn.net/Expert/topic/4758/4758224.xml?temp=.4036676
      

  4.   

    其实这个是用js+div写的一个插件似的东西。简单的可以用js 的Date 对象 getMonth getYear getDate 取得 月日年，然后 就可以实现你要的那种简单的下拉选了。 显示指定的时间可以由 js function 的函数传入 经过 判断是否为空或合法值，然后设入，或者单独传一个时间 类似 年月日 YYYY-MM-DD 用正则表达式 /^\d{4}-\d{1,2}-\d{1,2}/$ 来做个简单的效验。 然后用split（）方法截取字符串。其他的就都很简单了