一下好一款laydate.js日期时间选择插件，具有一定的参考价值，希望可以帮到你
日期时间选择插件laydate.js：
效果图：
1. 引入JS。
<script type="text/javascript" src="js/laydate.js"></script>
2. 根据需要做相应的配置。详情参看官网
<script>laydate({
elem: '#seldate', //目标元素。由于laydate.js封装了一个轻量级的选择器引擎，因此elem还允许你传入class、tag但必须按照这种方式 '#id .class'
event: 'focus', //响应事件。如果没有传入event，则按照默认的click
format: 'YYYY/MM/DD hh:mm:ss', // 分隔符可以任意定义，该例子表示只显示年月
festival: true, //显示节日
istime: true, //显示时间选项
choose: function(datas){ //选择日期完毕的回调
alert('得到：'+datas)
}
})
</script>
实例源码：
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--
<link href="favicon.ico" rel="shortcut icon" type="image/x-icon" />
<link href="favicon.ico" rel="Bookmark" type="image/x-icon" />
-->
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>layDate日期时间选择插件</title>
<link href="" rel="stylesheet" />
<script type="text/javascript" src="js/laydate.js"></script>
</head>
<body>
<form method="post" action="">
Way1,
请选择日期:<input type="text" name="date" onclick="laydate()" />
<hr />
Way2,
<input type="text" name="date" id='seldate' class="laydate-icon" /><hr />
<script>
laydate({
elem: '#seldate', //目标元素。由于laydate.js封装了一个轻量级的选择器引擎，因此elem还允许你传入class、tag但必须按照这种方式 '#id .class'
event: 'focus', //响应事件。如果没有传入event，则按照默认的click
format: 'YYYY/MM/DD hh:mm:ss', // 分隔符可以任意定义，该例子表示只显示年月
festival: true, //显示节日
istime: true, //显示时间选项
choose: function(datas){ //选择日期完毕的回调
alert('得到：'+datas)
}
})
</script>
Way3,
<input id="seldate1">
<span class="laydate-icon" onclick="laydate({elem:'#seldate1'})"></span>
</form>
</body>
</html>
设置好jQuery UI Datepicker后，去GitHub上搜索并下载jQuery Timepicker Addon。添加时分秒插件所需样式（官方样式，根据需要添加到页面或样式文件中）
/* css for timepicker */
.ui-timepicker-div .ui-widget-header { margin-bottom: 8px}
.ui-timepicker-div dl { text-align: left}
.ui-timepicker-div dl dt { float: leftclear:leftpadding: 0 0 0 5px}
.ui-timepicker-div dl dd { margin: 0 10px 10px 45%}
.ui-timepicker-div td { font-size: 90%}
.ui-tpicker-grid-label { background: noneborder: nonemargin: 0padding: 0}
.ui-timepicker-rtl{ direction: rtl}
.ui-timepicker-rtl dl { text-align: rightpadding: 0 5px 0 0}
.ui-timepicker-rtl dl dt{ float: rightclear: right}
.ui-timepicker-rtl dl dd { margin: 0 45% 10px 10px}
配置：
通过配置showHour、showMinute、showSecond设置是否显示时分秒通过配置stepHour、stepMinute、stepSecond设置时分秒步长
我的案例：
<link href="../CSS/jquery-ui.min.css" rel="stylesheet" type="text/css" /><link href="../CSS/jquery.ui.datepicker.min.css" rel="stylesheet" type="text/css" />
<!-- 注意：此处样式与官方样式不一至 -->
<style>
.ui-timepicker-div .ui-widget-header{ margin-bottom: 8px}.ui-timepicker-div dl{ text-align: left}.ui-timepicker-div dl dt{ height: 25px}.ui-timepicker-div dl dd{ margin: -25px 0 10px 65px}.ui-timepicker-div td { font-size: 90%}
</style>
<!-- 注意：此处因编辑器问题仅列出引用文件，请根据需要修改 -->
/JS/jquery.ui.core.min.js
/JS/jquery.ui.datepicker.min.js
/JS/jquery.ui.widget.min.js
/JS/jquery.ui.mouse.min.js
<script type="text/javascript">
