代码下载地址：  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日期时间控件的更多相关文章

  1. 学习日期时间控件 daterangepicker

    aterangepicker 是一款日期时间控件,可选择“年,月,日,时,分,秒”,可选择单面板,也可选择双面板(起止时间). 单面板示例:daterangepicker 单面板 codepen 在线 ...

  2. jquery-ui日期时间控件实现

    日期控件和时间控件为独立控件,日期时间控件要同一时候导入日期控件和时间控件的js,然后在日期控件加入时间控件显示參数,没有导入时间控件js.日期控件函数设置的时间控件參将包错 日期控件官网网址:htt ...

  3. 模仿win10样式，基于jquery的时间控件

    工作需要,写了一个基于jquery的时间控件,仿win10系统时间控件格式. 目前基本功能都有了,但时间格式只实现少数,但由于结构设计已经充分优化,填充起来非常容易. 这个控件相对网上其他的时间控件, ...

  4. 令人头痛的ExtJS日期时间控件

    1 缘由 Ext提供了日期.时间的控件,但没有将日期和时间组合在一起的控件.在网上搜索时,有前辈创建或重写了时间相关的类,并提供了源码.不得不说那位作者对 extjs 框架理解得很透彻,虽然不知道他当 ...

  5. Android日期时间控件DatePickerDialog和TimePickerDialog

    1.DatePickerDialog 在一些万年历.日程表等APP上我们经常可以看到日期选择控件,由于很少有用户会老老实实的手工输入日期,所以该控件的作用就是为了控制用户的输入格式,在Android中 ...

  6. jquery datetimepicker 日期时间控件的使用及参数说明

    首先下载 jquery.datetimepicker.css jquery.datetimepicker.main.js 1. 引入css和js (注:该控件要依赖于jquery) <link ...

  7. Extjs4 DateTimeField，日期时间控件完美版

    网上若干类似的控件,要么是有bug,要么是操作体验不合理,这里贡献一个比较科学的版本. 扩展包下载: http://files.cnblogs.com/qidian10/Ext.ux.rar 解压至E ...

  8. 小程序实现日期时间控件picker

    小程序自带的组件中有日期跟时间的picker,但就缺个日期时间picker组件,那没办法,只能自己弄一个,这个组件不是很难,比较难的地方是要根据不同年份(是否闰年)跟月份决定一个月里有多少天. 我直接 ...

  9. jquery 的日期时间控件（年月日时分秒）

    <!-- import package --> <script type="text/javascript" src="JS/jquery.js&quo ...

随机推荐

  1. Office2010安装需要MSXML版本6.10.1129.0的方法

    今天给朋友装Office2010,由于朋友之前使用的是绿化版的0ffice2007,所以卸载后安装Office遇到了若要安装Office2010,需要在计算机上安装MSXML版本6.10.1129.0 ...

  2. jquery ajax中事件的执行顺序

    jquery中各个事件执行顺序如下: 1.ajaxStart(全局事件) 2.beforeSend 3.ajaxSend(全局事件) 4.success 5.ajaxSuccess(全局事件) 6.e ...

  3. numpy的文件存储,读取 .npy .npz 文件

    Numpy能够读写磁盘上的文本数据或二进制数据. 将数组以二进制格式保存到磁盘 np.load和np.save是读写磁盘数组数据的两个主要函数,默认情况下,数组是以未压缩的原始二进制格式保存在扩展名为 ...

  4. 计蒜客 30996 - Lpl and Energy-saving Lamps - [线段树][2018ICPC南京网络预赛G题]

    题目链接:https://nanti.jisuanke.com/t/30996 During tea-drinking, princess, amongst other things, asked w ...

  5. cordova-ios 升级到4.4.0 无法真机跑iOS8 报错： dyld`dyld_fatal_error: -> 0x120085088 <+0>: brk #0x3

    项目进入测试阶段,马上要上线了,同事拿了自己的iOS8系统5s跑真机,无缘无故报错,之前跑她的手机完全没有问题的.Xcode 8.x中最低部署版本是iOS8.0,按理说完全能够跑真机的. 但是报了一个 ...

  6. iOS UITextField实时监听获取输入内容，中文状态去除预输入拼音

    http://blog.csdn.net/cse110/article/details/51360796 - (void)textFieldDidChange:(UITextField *)textF ...

  7. PLSQL developer开发工具相关配置

    首先要安装ORACLE Windows版本32位的客户端,在这里只安装ORACLE客户端就可以了,服务端我们选择使用LINUX版本的. 选择不接受安全更新 选择仅安装数据库软件 选择单实例数据库 语言 ...

  8. 添加用户username到sudo组

    添加用户username到sudo组: usermod -aG sudo username USERMOD(8) 系统管理命令 USERMOD(8) 名 usermod - 修改一个用户账户 大 us ...

  9. oracle动态视图（一）stat

    1v$mystat,v$sesstat,v$sysstat是用来分别统计用户级,会话级,系统级信息的. SID                                 NUMBER STATI ...

  10. Redis压力测试

    然后依次测试如下命令: 上面第三个命令写错了,要改为: