代码下载地址：  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. 【BZOJ3413】匹配 离线+后缀树+树状数组

    [BZOJ3413]匹配 Description Input 第一行包含一个整数n(≤100000). 第二行是长度为n的由0到9组成的字符串. 第三行是一个整数m. 接下来m≤5·10行,第i行是一 ...

  2. ActiveMQ延迟消息配置

    ActiveMQ使用延迟消息,需要在activemq.xml配置文件中添加这项: schedulerSupport="true" <broker xmlns="ht ...

  3. HUSTM 1601 - Shepherd

    题目描述 Hehe keeps a flock of sheep, numbered from 1 to n and each with a weight wi. To keep the sheep ...

  4. POJ-1414 Life Line （暴力搜索）

    Life Line Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 855 Accepted: 623 Description L ...

  5. cmake practice一文中安装可执行文件的方法

    在学习cmake practice第四章中,第四章的任务如下 修改 Helloworld 支持安装在本节开头我们定义了本节的任务如下:1,为工程添加一个子目录 src,用来存储源代码;2,添加一个子目 ...

  6. HDFS文件上传

    下图描述了Client向HDFS上传一个200M大小的日志文件的大致过程: 1)首先,Client发起文件上传请求,即通过RPC与NameNode建立通讯. 2)NameNode与各DataNode使 ...

  7. sqoop学习笔记

    #################################################################################################### ...

  8. python数据结构之树（概述）

    树 在计算机科学中,树是分层结构的抽象模型 .本篇学习笔记记录树的内容如下: 树的基本功能:定义.术语.ADT 树的遍历方法:前序.中序.后序 树的定义 第一种:树由一组节点和一组连接节点的边组成.树 ...

  9. Windows hackson (rundll32--ADS)

    http://www.tuicool.com/articles/AnuqA3 http://www.2cto.com/Article/201507/424713.html http://drops.w ...

  10. hmm三个问题

    现在,重点是要了解并解决HMM 的三个问题. 问题1,已知整个模型,我女朋友告诉我,连续三天,她下班后做的事情分别是:散步,购物,收拾.那么,根据模型,计算产生这些行为的概率是多少. 问题2,同样知晓 ...