JQuery 插件 - TimePicker

最新推荐文章于 2024-08-08 08:06:19 发布

a3391111

最新推荐文章于 2024-08-08 08:06:19 发布

阅读量286

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/Dannier/archive/2011/08/03/TimePicker.html

版权

　　示例图片

在自己项目中实现，例

　　主要步骤

1. 引入jQuery库到你的项目中， jquery-1.4.1.min.js

2. 添加所需要的插件脚本， jquery-ui-1.8.14.custom.min.js & jquery-ui-timepicker-addon.js

3. 添加CSS到项目中， jquery-ui-1.8.14.custom.css

4. 添加图片

　　具体代码

加入CSS

<style type="text/css">
        #ui-datepicker-div{ font-size: 80%;}
</style>
<link rel="stylesheet" media="all" type="text/css" href="Styles/jquery-ui-1.8.14.custom.css" />

加入jQuery，及调用代码

View Code

<script type="text/javascript" language="javascript" src="Scripts/jquery-1.4.1.min.js"></script>
<script type="text/javascript" language="javascript" src="Scripts/jquery-ui-1.8.14.custom.min.js"></script>
<script type="text/javascript" language="javascript" src="Scripts/jquery-ui-timepicker-addon.js"></script>
<script type="text/javascript">
        $(function () {
            $('#example7').datetimepicker({
                hour: 13,
                minute: 15
            });
        });
</script>

在HTML中添加

View Code

<body>
<form id="form1" runat="server">
<div id="ui-datepicker-div">
<input type="text" name="example7" id="example7" value=""/>
</div>
</form>
</body>
</html>