描述:有两个下拉框(开始时间、结束时间),供选则日期和时间(含时、分、秒)和一个时间差显示的文本框
问题:
    1、结束时间不能小于开始时间,小于则给出提示且让结束时间重新获得焦点,进行选择
    2、当在结束时间大于开始时间的情况下,开始时间和结束时间只要进行了选择或者更改就要改变文本框中得值。
求完整实现  谢谢

解决方案 »

  1.   

    可选日期是什么?任意的?还是随机的?一定要下拉框???
    基本思路:
       两个label外加两个日期选择控件;
       可以通过substring()进行截取取得年、月、日以及时、分、秒;
       做减法,新建几个文本框并将对应的差赋值进去;
      

  2.   

    顺便推荐个日历控件http://razum.si/jQuery-calendar/TimeCalendar.html
      

  3.   

    一定是要下拉框。
     如下:    <select id="startTime">
             <option></option>
             <option>08:00</option>
             <option>08:23</option>
             <option>08:30</option>
                ……
        </select>    <select id="overTime">
             <option></option>
             <option>08:00</option>
             <option>08:23</option>
             <option>08:30</option>
                 ……
        </select>
        
        <input type="text" id="time"/> 1、当对startTime的值改变的时候,判断startTime不能大于overTime,同时取得overTime中的值,二者(overTime-startTime)想减,得到time
     2、当对overTime的值改变的时候,判断overTime不能小于startTime,同时取得startTime中的值,二者(overTime-startTime)想减,得到time
     
     注:不能在select中直接用onchange,而是要在js中通过获得ID去写onchange.
      

  4.   


    <script>
    function getHour(o){return o.substring(0,2)};
        function getMinute(o){return o.substring(3,5)};
    function compare(t1,t2){
            if(getHour(t1)>getHour(t2)){
                   return true;}
       else if(getHour(t1)==getHour(t2)&&(getMinute(t1)>=getMinute(t2))){
           return true;
       }
    return false;
    }
    //alert(compare("07:59","08:00"));
    var start_time=document.getElementById("startTime");
    var end_time=document.getElementById("endTime");
    start_time.onchange=function(){
            var end=end_time.value;
    if(!compare(end,start_time.value)){alert("please check again !");
    this.options[0].selected=true;
    }
    end_time.onchange=function(){
    if(!compare(end_time.value,start_time.value)){alert("please check again !");
    this.options[0].selected=true;
    }
    }
    }
    </script>
      

  5.   


    <body>
        <select id="startTime">
             <option>08:00</option>
             <option>08:23</option>
             <option>08:30</option>
        </select>    <select id="endTime">
             <option>08:00</option>
             <option>08:23</option>
             <option>08:30</option>
      </select>
        <div>
        <input type="text" id="hour"/>时<input type="text" id="minute"/>分</div> <script>
    function getHour(o){return o.substring(0,2)};
        function getMinute(o){return o.substring(3,5)};
    function compare(t1,t2){
            if(getHour(t1)>getHour(t2)){
                   return true;}
       else if(getHour(t1)==getHour(t2)&&(getMinute(t1)>=getMinute(t2))){
           return true;
       }
    return false;
    }
    //alert(compare("07:59","08:00"));
    var cha_hour=document.getElementById("hour");
    var cha_minute=document.getElementById("minute");
    var start_time=document.getElementById("startTime");
    var end_time=document.getElementById("endTime");
    start_time.onchange=function(){
            var end=end_time.value;
    if(!compare(end,start_time.value)){alert("please check again !");
    this.options[0].selected=true;
    }
    else {cha_hour.value=getHour(end_time.value)-getHour(start_time.value);alert(cha_hour.value);
    cha_minute.value=getMinute(end_time.value)-getMinute(start_time.value);alert(cha_minute.value);}
    }
    end_time.onchange=function(){
    if(!compare(end_time.value,start_time.value)){alert("please check again !");
    this.options[0].selected=true;
    }
    else {
    cha_hour.value=getHour(end_time.value)-getHour(start_time.value);//时差
    cha_minute.value=getMinute(end_time.value)-getMinute(start_time.value);//分差}
    } </script>
    </body>不好意思,上面漏掉一个功能。。囧