jquery日期时间控件

最新推荐文章于 2024-10-14 16:15:00 发布

原创最新推荐文章于 2024-10-14 16:15:00 发布 · 2.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#jquery ui #日期时间控件

web 专栏收录该内容

6 篇文章

订阅专栏

这篇博客分享了如何使用jQuery UI创建日期时间控件，提供了代码下载地址，旨在帮助开发者避免重复工作，直接应用于项目中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

四、效果图