代码下载地址：  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. 【JSP】JSP的介绍和基本原理

    JSP简介 JSP的核心实质是Servlet技术.JSP是后来添加的基于Servlet的一种扩展技术.但二者在使用上有不同的方向. 由于Servlet实质是一个Java类,因此非常适合用来处理业务逻辑 ...

  2. 【CF708D】Incorrect Flow 最小费用可行流

    [CF708D]Incorrect Flow 题意:给你一个点数为n,边数为m的流网络,每条边有一个容量c和流量f,这个网络可能是不合法的.你可以花费1的代价使c或f减少或增加1,可以修改无限次.你不 ...

  3. CentOS 6.8下Apache绑定多个域名的方法

    如何通过设置Apache的http.conf文件,进行多个域名的绑定(假设我们要绑定的域名是discuz11.com和discuz22.com,独立IP为25.25.25.25). 域名/IP地址 域 ...

  4. PHP将富文本内容去除各类样式图片等只保留txt文本内容（作用于SEO的description）

    1.从数据库读取富文本内容样式如下: <p style=";text-indent: 0;padding: 0;line-height: 26px"><span ...

  5. springmvc如何访问到静态的文件，如jpg,js,css

    如何你的DispatcherServlet拦截"*.do"这样的有后缀的URL,就不存在访问不到静态资源的问题. 如果你的DispatcherServlet拦截"/&qu ...

  6. <input type=file>上传唯一控件

    值得注意的是:当一个表单里面包含这个上传元素的时候,表单的enctype必须指定为multipart/form-data,method必须指定为post,浏览器才会认识并正确执行.但是还有一点,浏览器 ...

  7. CSU 1804 - 有向无环图 - [(类似于)树形DP]

    题目链接:http://acm.csu.edu.cn/csuoj/problemset/problem?pid=1804 Bobo 有一个 n 个点,m 条边的有向无环图(即对于任意点 v,不存在从点 ...

  8. NLP常用语料集合

    常用语料资源 下面提供一些网上能下载到的中文的好语料,供研究人员学习使用.(1).中科院自动化所的中英文新闻语料库 http://www.datatang.com/data/13484中文新闻分类语料 ...

  9. Django-MySQL数据库使用01

    Django连接数据库的要求:1)Pycharm运行Django平台:2)MySQL数据库.本文的前提是这两个平台读者都已经都正确安装,未安装的朋友请自行百度.说明一下我用的Django是2.1版本, ...

  10. Oracle备份恢复之逻辑备份

    exp 交互模式:导出scott用户下的emp表. [oracle@localhost ~]$ exp Export: Release 10.2.0.1.0 - Production on Thu N ...