因为毕业设计的项目中需要用到时间选择器,然而基于Bootstrap的时间选择器时能精确到5min,所以就做了一个基于JQuery的时间选择器demo。
一、demo展示
二、项目结构
其中css/images中的两张图片是必须要的,它是选择月份的两个箭头图标所必需的。jquery-ui中本身就有日期选择器,这里通过jquery-ui-timepicker-addon来将日期选择器扩展成日期时间选择器。
三、index.html文件如下
<html>
<head>
<link rel="stylesheet" href="./css/jquery-ui.css">
<link rel="stylesheet" href="./css/jquery-ui-timepicker-addon.css">
<title>index</title>
</head>
<body>
<input type="text" id="start_time" />
<script src="./js/jQuery-2.2.0.min.js"></script>
<script src="./js/jquery-ui.js"></script>
<script src="./js/jquery-ui-timepicker-addon.js"></script>
<script src="js/jquery.ui.datepicker-zh-CN.js" type="text/javascript" charset="gb2312"></script>
<script src="js/jquery-ui-timepicker-zh-CN.js" type="text/javascript" charset="utf8"></script>
<script type="text/javascript">
$(function(){
$("#start_time").datetimepicker({
timeFormat: "HH:mm:ss",
dateFormat: "yy-mm-dd"
});
});
</script>
</body>
</html>
四、demo下载
链接:https://pan.baidu.com/s/1_FKsrSzdDRK4jNcX94ByOw
提取码:mwq4