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日期时间控件

相关文章