JQuery-datetimepicker日期时间选择器，增加时分秒

最新推荐文章于 2025-06-06 16:31:04 发布

凉城古梦喵扑街

最新推荐文章于 2025-06-06 16:31:04 发布

阅读量6.1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/ssh159/article/details/79827232

前端专栏收录该内容

13 篇文章

订阅专栏

本文介绍了如何在JQuery-ui日期时间选择器中增加时分秒的选择功能，通过第三方开发者提供的jquery-ui-timepicker-addon插件，用户不仅可以选择年月日，还能选择精确到时分秒的时间，并且可以一键获取当前系统的日期。

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

jquery-ui 类库，官方里面的demo是没有时分秒的，

但是后面的开发者增加了这些功能！

除了选择年月日，可以选择时分秒，

也可以点击now获取今天这个电脑的准确日期

JQuery-UI1.12下载

（提示：

1、jquery用js，

2、jquery-ui用图标素材，以及一个js，

3、由第三方开发者提供的 jquery-ui-timepicker-addon.css，jquery-ui-timepicker-addon.js）

<!DOCTYPE html>
<html>
  <head>
    <title>datepicker.html</title>
<!--datepicker:日期采摘； 可以制作一个简单的日历表 -->	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 <script src="js/jquery.js"></script>
 <script src="js/jquery-ui.js"></script>  
 <script src="js/jquery-ui-timepicker-addon.js"></script>  
 
 <link type="text/css" href="css/jquery-ui.css" rel="stylesheet">
 <link type="text/css" href="css/jquery-ui-timepicker-addon.css" rel="stylesheet">
 
  </head>
  
  <body> <!-- 由于UI库的版本不同，跟老师相比：没有2个按钮 -->
     
  <div style="margin: 200px;">   
     <input type="text" id="TodayTime" value="2018-4-05 13:40:10">   
 </div>  
  
  <script> 
   $(function(){
   	$("#TodayTime").datetimepicker({  
                defaultDate: $('#TodayTime').val(),  
                dateFormat: "yy-mm-dd",  
                showSecond: true,  
                timeFormat: 'hh:mm:ss',  
                stepHour: 1,  
                stepMinute: 1,  
                stepSecond: 1  
      })
   })
   
 
 </script>  
     
  </body>
</html>