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 文件请见代码下载
四、 效果图
jquery日期时间控件的更多相关文章
- 学习日期时间控件 daterangepicker
aterangepicker 是一款日期时间控件,可选择“年,月,日,时,分,秒”,可选择单面板,也可选择双面板(起止时间). 单面板示例:daterangepicker 单面板 codepen 在线 ...
- jquery-ui日期时间控件实现
日期控件和时间控件为独立控件,日期时间控件要同一时候导入日期控件和时间控件的js,然后在日期控件加入时间控件显示參数,没有导入时间控件js.日期控件函数设置的时间控件參将包错 日期控件官网网址:htt ...
- 模仿win10样式,基于jquery的时间控件
工作需要,写了一个基于jquery的时间控件,仿win10系统时间控件格式. 目前基本功能都有了,但时间格式只实现少数,但由于结构设计已经充分优化,填充起来非常容易. 这个控件相对网上其他的时间控件, ...
- 令人头痛的ExtJS日期时间控件
1 缘由 Ext提供了日期.时间的控件,但没有将日期和时间组合在一起的控件.在网上搜索时,有前辈创建或重写了时间相关的类,并提供了源码.不得不说那位作者对 extjs 框架理解得很透彻,虽然不知道他当 ...
- Android日期时间控件DatePickerDialog和TimePickerDialog
1.DatePickerDialog 在一些万年历.日程表等APP上我们经常可以看到日期选择控件,由于很少有用户会老老实实的手工输入日期,所以该控件的作用就是为了控制用户的输入格式,在Android中 ...
- jquery datetimepicker 日期时间控件的使用及参数说明
首先下载 jquery.datetimepicker.css jquery.datetimepicker.main.js 1. 引入css和js (注:该控件要依赖于jquery) <link ...
- Extjs4 DateTimeField,日期时间控件完美版
网上若干类似的控件,要么是有bug,要么是操作体验不合理,这里贡献一个比较科学的版本. 扩展包下载: http://files.cnblogs.com/qidian10/Ext.ux.rar 解压至E ...
- 小程序实现日期时间控件picker
小程序自带的组件中有日期跟时间的picker,但就缺个日期时间picker组件,那没办法,只能自己弄一个,这个组件不是很难,比较难的地方是要根据不同年份(是否闰年)跟月份决定一个月里有多少天. 我直接 ...
- jquery 的日期时间控件(年月日时分秒)
<!-- import package --> <script type="text/javascript" src="JS/jquery.js&quo ...
随机推荐
- 使用Speech SDK 5.1文字转音频
下载地址: http://www.microsoft.com/en-us/download/details.aspx?id=10121 SeppchSDK51.exe 语音合成引擎 SpeechSDK ...
- Unity3D笔记 英保通五 鼠标事件与GUI系统双击检测
一.如何使用GUI事件来检测鼠标是否按下的事件: 获取当前事件:var e:Event=Event.current: using UnityEngine; using System.Collectio ...
- [转]Android Path里FillType功能
对于简单的封闭图形(路径无相交的现象),图形的外部和内部和容易判断,但如果路径有相交的情况,对应重叠的部分,使用不同的填充模式,内部和外部的定义有所不同.填充模式可以分为两类: EVEN_ODD 意味 ...
- Elasticsearch 索引、更新、删除文档
一.Elasticsearch 索引(新建)一个文档的命令: curl XPUT ' http://localhost:9200/test_es_order_index/test_es_order_t ...
- DLRS(近三年深度学习应用于推荐系统论文汇总)
Recommender Systems with Deep Learning Improving Scalability of Personalized Recommendation Systems ...
- TFS二次开发09——查看文件历史(QueryHistory)
这篇文章给大家展示怎样获取一个文件的历史版本,内容很简单,直接上代码了. string tpcURL = "http://127.0.0.1:8080/"; TfsTeamProj ...
- codeforces#518 Div2 ABCDE
A---Birthday http://codeforces.com/contest/1068/problem/A 题意: 有n种硬币,m个人.m个人要给Ivan送硬币,每个人送的硬币都要互不相同但数 ...
- 【紫书】Tree UVA - 548 静态建树dfs
题意:给你中序后序 求某叶子节点使得从根到该节点权值和最小.若存在多个,输出其权值最小的那个. 题解:先建树,然后暴力dfs/bfs所有路径,取min 技巧:递归传参数,l1,r1,l2,r2, su ...
- linux中fork函数详解(转)
add by zhj: 在Linux,创建进程是用fork(),它其实就是拷贝父进程的数据段和其它数据,这相当于C函数调用中的值传递,这是 此后两者的修改都互不影响.因为两者的数据虽相同,但却在不同的 ...
- table 的td 自适应事项
media的html结构,如果用display:table-cell实现, table { width: 100%; border-collapse: collapse; border: $bor; ...