jquery-ui 类库,官方里面的demo是没有时分秒的,
但是后面的开发者增加了这些功能!
除了选择年月日,可以选择时分秒,
也可以点击now获取今天这个电脑的准确日期
(提示:
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>