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 文件请见代码下载

四、效果图

转载于:https://www.cnblogs.com/lovesqcc/p/4037723.html

jquery日期时间控件相关推荐

HTML5超简单的日期时间控件
HTML5超简单的日期时间控件时间都是宝贵的,尤其是开发人员,所以为了节省时间,我直接展示下效果,符合您的要求就采纳,不符合,就不用继续看了! 1.1 日期控件效果: 1.2 时间控件展示: 2.1 ...
python日历gui_python GUI库图形界面开发之PyQt5日期时间控件QDateTimeEdit详细使用方法与实例...
PyQt5日期时间控件QDateTimeEdit介绍 QDateTimeEdit是一个允许用户编辑日期时间的控件,可以使用键盘上的上下键头按钮来增加或减少日期的时间值,QDateTimeEdit通过s ...
bootstrap日期时间控件
datetime控件 Bootstrap的日期时间控件,使用非常的简单. 首先,添加日期时间控件的引用 @*datetime控件*@<link href="~/Content/Boot ...
轻量级的日期时间控件Pikaday
今天看到一个网友分享的一篇文章,有关轻量级的日期时间控件Pikaday,感觉很实用.在这里总结一下,方便日后使用.因为之前也遇到过类似的问题,My97datepicker插件样式过于老旧,但又没有其它 ...
WPF自定义日期时间控件
WPF自定义日期时间控件一.需求分析二.功能实现一.需求分析在工作中遇到的项目中,大部分软件是处于全屏运行状态,这时候就需要在软件的界面上加上日期时间那些,方便用户查看当前时间. 二.功能实现 ...
C# DateTimePicker：日期时间控件
日期时间控件(DateTimePicker)在时间控件中的应用最多,主要用于在界面上显示当前的时间. Format 属性提供了 4 个属性值,如下所示. Short:短日期格式,例如2017/3/1: ...
Androi常用日期时间控件
虽然简单但是还是想记录下,使用Android自带日期时间控件,界面及源码如下: 主Activity源码: public class MainActivity extends Activity { ...
Android开发之日期时间控件选择
Android开发之日期时间控件选择文章目录前言一.创建弹出Layout 1.1 新建Layout,修改样式为LinearLayout 1.2 Layout中添加日期和时间控件二.新建Date ...
收集几个js实现的日期时间控件
/**//** *大部分代码来自meizz的日历控件. *tiannet添加了时间选择功能.select,object标签隐藏功能,还有其它小功能. *使用方法: * (1)只选择日期 & ...

jquery日期时间控件

jquery日期时间控件相关推荐

最新文章

热门文章