timePicker插件显示年月日时分，并让之默认显示当前时间

最新推荐文章于 2025-11-12 09:49:13 发布

原创最新推荐文章于 2025-11-12 09:49:13 发布 · 1w 阅读

1 ·

CC 4.0 BY-SA版权

HTML5 专栏收录该内容

13 篇文章

订阅专栏

这个博客展示了如何使用jQuery UI库创建一个显示年月日时分的时间选择器，并使其默认显示当前时间。通过引入相关CSS和JS文件，设置HTML元素，以及应用jQuery代码来初始化时间选择器并聚焦触发当前时间显示。

<pre name="code" class="html"><!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>时间选择器</title>
  <link rel="stylesheet" href="timepicker/jquery-ui.min.css">
  <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
  <script src="http://apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
  <script src="timepicker/jquery.ui.datepicker-zh-CN.js"></script>
  <script src="timepicker/jquery-ui-timepicker-addon.js"></script>
<style>
.ui-timepicker-div .ui-widget-header { margin-bottom: 8px; }  
.ui-timepicker-div dl { text-align: left; }  
.ui-timepicker-div dl dt { height: 25px; margin-bottom: -25px; }  
.ui-timepicker-div dl dd { margin: 0 10px 10px 65px; }  
.ui-timepicker-div td { font-size: 90%; }  
.ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }
</style>
</head>
<body>
	<div class="timePicker">
		<input type="text" node-type="datepicker" name="datetime" id="one">
	</div>
	<script>
		$(function(){
		    $("input[node-type='datepicker']").datetimepicker();
		    $("#one").one('focus',function(){
		          $(".ui-datepicker-current.ui-state-default.ui-priority-secondary.ui-corner-all").trigger('click'); 
		    }) 
		})    
	</script>
</body>
</html>