JS实现时间选择器

古城微笑少年丶 2021-07-25 18:19 470阅读 0赞

### JS实现时间选择器 ###

**dateTime.js**

**使用demo**

<!DOCTYPE html>
    
    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>Index</title>
        
       
        <script src="~/Scripts/dateTime.js"></script>
        
        <script>
            window.onload = function () {
                var stryear = 2000;	//设置开始时间2000年
                 var endyear = 2060;	//设置结束时间2060年
                var date = dateTimePicker(stryear,endyear);	//调用dateTimePicker方法获取时间(开始时间，结束时间）
    
    			//定义日期时间
                var year = date.dateTimeArray[0];	//年
                var month = date.dateTimeArray[1];//月
                var day = date.dateTimeArray[2];//日
                var time = date.dateTimeArray[3];//时
                var minute = date.dateTimeArray[4];//分
                var second = date.dateTimeArray[5];//秒
    
    
    			//将日期时间放入对应的select中
                var yearInner = "";
                var monthInner = "";
                var dayInner = "";
                var timeInner = "";
                var minuteInner = "";
                var secondInner = "";
                //年
                for (var i = 0; i < year.length; i++) {
                    yearInner += '<option>' + year[i] + '</option>'
                }
                document.getElementById("yearSelect").innerHTML = yearInner;
                //月
                for (var i = 0; i < month.length; i++) {
                    monthInner += '<option>' + month[i] + '</option>'
                }
                document.getElementById("monthSelect").innerHTML = monthInner;
                //日
                for (var i = 0; i < day.length; i++) {
                    dayInner += '<option>' + day[i] + '</option>'
                }
                document.getElementById("daySelect").innerHTML = dayInner;
                //时
                for (var i = 0; i < time.length; i++) {
                    timeInner += '<option>' + time[i] + '</option>'
                }
                document.getElementById("timeSelect").innerHTML = timeInner;
                //分
                for (var i = 0; i < minute.length; i++) {
                    minuteInner += '<option>' + minute[i] + '</option>'
                }
                document.getElementById("minuteSelect").innerHTML = minuteInner;
                //秒
                for (var i = 0; i < second.length; i++) {
                    secondInner += '<option>' + second[i] + '</option>'
                }
                document.getElementById("secondSelect").innerHTML = secondInner;
            }
        </script>
    </head>
    <body>
       <div>
          <select id="yearSelect"></select>
           <span>-</span>
           <select id="monthSelect"></select>
           <span>-</span>
           <select id="daySelect"></select>
           <br />
           <select id="timeSelect"></select>
           <span>:</span>
           <select id="minuteSelect"></select>
           <span>:</span>
           <select id="secondSelect"></select>
       </div>
    </body>
    </html>