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)