JQuery 插件 - TimePicker

　　示例图片

在自己项目中实现，例

　　主要步骤

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>

下载链接：http://jqueryui.com/download

参考示例： http://jqueryui.com/demos/datepicker/

posted @ 2011-08-03 18:01  scogee  阅读(7993)  评论(0)  编辑  收藏  举报