组件 | clockpicker组件(时间选择控件) | |||||
功能说明 | 基于jQuery时间选择控件,其特点如下: 以时钟形式显示时间,直观 基于html5绘制,仅支持IE9以上浏览器 |
|||||
使用说明 | 1.引入如下js 如果没有引入以下js,那么需要引入以下js: <link rel=”stylesheet” type=”text/css” href=”/js/jquery-clockpicker/assets/css/bootstrap.min_wev8.css”> <link rel=”stylesheet” type=”text/css” href=”/js/jquery-clockpicker/dist/bootstrap-clockpicker.min_wev8.css”> <script type=”text/javascript” src=”/js/jquery-clockpicker/assets/js/bootstrap.min_wev8.js”></script> <script type=”text/javascript” src=”/js/jquery-clockpicker/dist/bootstrap-clockpicker.min_wev8.js”></script> |
|||||
2、页面指定一个显示区域 <!– Input group, just add class ‘clockpicker’, and optional data-* –> <div class=”input-group clockpicker” data-placement=”right” data-align=”top” data-autoclose=”true”> <input type=”text” class=”form-control” value=”09:32″> <span class=”input-group-addon”> <span class=”glyphicon glyphicon-time”></span> </span> </div> <!– Or just a input –> <input id=”demo-input” /> 3、当页面加载完成后,在页面上调用如下方法 jQuery(document).ready(function(){ $(‘.clockpicker’).clockpicker() .find(‘input’).change(function(){ // TODO: time changed console.log(this.value); }); $(‘#demo-input’).clockpicker({ autoclose: true }); if (something) { |
||||||
例子 |
|
|||||
API | https://github.com/weareoutman/clockpicker | |||||
Demo |
转载请注明:赫非域 » ecology开发之clockpicker组件