jquery实现时间控件


     代码下载地址：  jquery日期时间控件下载地址 。  工作中用到， 这里分享一下， 避免重复摸索劳动。

 

       一、 HTML 文件   

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>jquery 日期时间控件</title>
        <script src="datetime_js_css_include.js"></script>
    
        <script type="text/javascript">
          
        var obtainTimeStamp = function(dateTimeStr) {
            if (dateTimeStr == null || dateTimeStr == '') { return 0; }
            return Math.floor((new Date(dateTimeStr)).getTime() / 1000);
        }
        
        
        $(document).ready(function() {
 
            /*
             * 设置 jquery ui datepicker 外观
             */
            timeFormatObj = {

                showSecond: true,  
                changeMonth: true,   
                timeFormat: 'HH:mm:ss',  
                dateFormat: 'yy-mm-dd',
                
                stepHour: 1,
                stepMinute: 5,
                stepSecond: 5
            };
                  

            $('#beginDateTimepicker').datetimepicker(timeFormatObj);
            $('#endDateTimepicker').datetimepicker(timeFormatObj);
            
            $('input[type="submit"]').button().click(function(event) {
                     
                     var beginTimeStamp = 0, endTimeStamp = 0 ; 
                     var now = new Date();
                     var endTimeStamp = Math.floor(now.getTime() / 1000);
                     var lastTimeValue = $('#lastTimeSelect').val(); 
                     var beginTimeStamp = endTimeStamp - parseInt(lastTimeValue) * 60 * 60;

                     var beginTimeStampForUserDefined = obtainTimeStamp($('#beginDateTimepicker').val());
                      var endTimeStampForUserDefined = obtainTimeStamp($('#endDateTimepicker').val());
                     
                     if (beginTimeStampForUserDefined != 0 && endTimeStampForUserDefined != 0) {
                         beginTimeStamp = beginTimeStampForUserDefined;
                         endTimeStamp = endTimeStampForUserDefined;
                     }
                     
                     timeRange = [beginTimeStamp, endTimeStamp];

                     alert(beginTimeStamp + ' ' + endTimeStamp);
                     
                 });
            
                  $('#drawChartButton').trigger('click');
               
         });
        
        
        </script>
    
    </head>
    
    <body>
    
         <div class="timeSelect">  
             <p> <span class="fieldLabel"> 查询区间: </span>
                    <select name="lastTimeSelect" id="lastTimeSelect" style="width: 100px;">  
                    <option value="3">最近3小时</option>    
                    <option value="6">最近6小时</option>    
                    <option value="12">最近12小时</option>    
                    <option value="24">最近一天</option> 
                    <option value="168">最近一周</option>       
                </select> (如果不指定自定义时间范围, 则以查询区间为准)</p>   
             <p> <span class="fieldLabel"> 自定义时间范围: </span> 
                <input type="text" id="beginDateTimepicker" name="beginDateTimepicker" value=""/>
                  - <input type="text" id="endDateTimepicker" name="endDateTimepicker" value=""/>
                  <input type="submit" value="确定" id="drawChartButton"/> </p>
        </div>    
        
        <hr/>
             
        <div class="drawRegion">
        </div>           
            
    
    </body>
    
    
</html>

 

        二、 JS 文件 datetime_js_css_include.js   

document.write('<link rel="stylesheet" type="text/css" href="css/jquery-ui.css" />');
document.write('<link rel="stylesheet" type="text/css" href="css/jquery-ui-timepicker-addon.min.css" />');
document.write('<link rel="stylesheet" type="text/css" href="css/datetimepicker.css" />');
document.write('<script src="js/jquery-1.10.1.min.js" type="text/javascript"></script>');
document.write('<script src="js/jquery-ui-1.9.2-min.js"></script>');
document.write('<script src="js/jquery.ui.datepicker-zh-CN.min.js"></script>');
document.write('<script src="js/jquery-ui-sliderAccess.js"></script>');
document.write('<script src="js/jquery-ui-timepicker-addon.min.js"></script>');

       三、 依赖JS 文件请见代码下载

       四、 效果图

       jquery日期时间控件_jquery