代码下载地址：  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. 解决Android 5.0中出现的警告：Service Intent must be explicit

    extends:http://www.eoeandroid.com/thread-568853-1-1.html 本帖最后由 469874851 于 2015-3-11 18:15 编辑 有些时候我们 ...

  2. VSCode集成TypeScript编译

    先安装github客户端和nodeJS客户端吧,直接去官网下载,nodeJS客户端安装完就集成了npm; 查看是否成功: git version  node -v npm-v 安装TypeScript ...

  3. Shell for

    for循环一般格式为:for 变量 in 列表do command1 command2 ... commandNdone列表是一组值(数字.字符串等)组成的序列,每个值通过空格分隔.每循环一次,就将列 ...

  4. mousedown\mouseup\click事件关系

    背景分析: 如果用户在一个元素上点击,那么最少三个事件会被触发,事件发生顺序: 1.mousedown,当用户在这个元素上按下鼠标键的时候 2.mouseup,当用户在这个元素上松开鼠标键的时候 3. ...

  5. Python 基础知识（一）

    1.Python简介 1.1.Python介绍 python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,吉多·范罗苏姆(中文名字:龟叔)为了在阿姆斯特丹打发时 ...

  6. HOJ 2091 Chess（三维简单DP）

    Chess My Tags (Edit) Source : Univ. of Alberta Local Contest 1999.10.16 Time limit : 1 sec Memory li ...

  7. Spark集群高可用HA配置

    本文中的Spark集群包含三个节点,分别是Master,Worker1,Worker2. 1.在Master机器上安装Zookeeper,本文安装在/usr/etc目录下 2.在Master机器配置Z ...

  8. Oracle Function：TO_CHAR

    Description The Oracle/PLSQL TO_CHAR function converts a number or date to a string.将数字转换为日期或字符串 Syn ...

  9. free 释放内存

    http://www.cplusplus.com/reference/cstdlib/free/ free void free (void* ptr); Deallocate memory block ...

  10. The Concept of a Process

    COMPPUTER SCIENCE AN OVERVIEW 11th Edition One of the most fundamental concepts of modern operating ...