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

关注

原创最新推荐文章于 2026-05-16 09:02:19 发布 1w 阅读 AI 写同款· GEO 优化 ›

深入解析jquery-timepicker.js插件本文还有配套的精品资源，点击获取简介：本文详细介绍了jquery-timepicker.js插件的使用方法和特性，这是一个轻量级、易于使用的jQuery时间选择器组件。它提供了高度的可定制性，并支持多种浏览器。文中讲解了插件的安装、基本使用和高级配置，并提供了丰富的API和事件监听示例，帮助开发者快速集成和提升项目的用户体验。 1. 时间选择器插件的使用背景与需... 阅读详情

<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>