jquery日期时间控件
2024-09-29 10:28:36
代码下载地址: 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 文件请见代码下载
四、 效果图
最新文章
- iOS----调试技巧,让你的开发事半功倍
- 案例借鉴 | 某通讯巨头的IT建设方案
- web前端开发学习路径图
- ElasticSearch 5.0.1 java API操作
- BZOJ1798——[Ahoi2009]Seq维护序列seq
- 已知树的前序、中序,求后序的c++实现&;已知树的后序、中序,求前序的c++实现
- 07 DAY 1
- PHP 字符串函数--替换、正则匹配等
- Trie,HDU1875world puzzle
- 【转】windows7 64位系统认不出8g内存显示只有3G可用
- delphi 程序输出文件夹存放位置
- vue-router2.0动态路由获取参数
- (转载)MQ基本操作
- AI - TensorFlow - 第一个神经网络(First Neural Network)
- 品阿里 Java 开发手册有感
- mysql的分表与分区的区别
- windows server 2012启动进入cmd解决方法
- B/S FastReprot使用
- python SMTP 发送邮件
- $Gauss$消元