其他代码

clockpicker - 时钟样式jquery日期时间选择器

创客主机


这是一个为Bootstrap定制的时钟样式的日期时间选择插件,当然也可以单独使用jQuery来实现。它的兼容性非常好,可兼容所用的现代浏览器,包括IE9,IE8下效果也不错。ClockPicker最先是为Bootstrap定制的,所以使用这个插件必须引入Bootstrap。你想不使用Bootstrap,只使用jQuery也有解决方案。.popover和.btn样式是在Bootstrap下使用的,如果只使用jQuery,要将所有的bootstrap-*改为jquery-*。

使用方法:

  1. <!-- Bootstrap stylesheet -->
  2. <link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css">
  3.  
  4. <!-- ClockPicker Stylesheet -->
  5. <link rel="stylesheet" type="text/css" href="dist/bootstrap-clockpicker.min.css">
  6. <!-- jQuery and Bootstrap scripts -->
  7. <script type="text/javascript" src="assets/js/jquery.min.js"></script>
  8. <script type="text/javascript" src="assets/js/bootstrap.min.js"></script>
  9.  
  10. <!-- ClockPicker script -->
  11. <script type="text/javascript" src="dist/bootstrap-clockpicker.min.js"></script>

HTML结构:

  1. <!-- Input group, just add class 'clockpicker', and optional data-* -->
  2. <div class="input-group clockpicker" data-placement="right" data-align="top" data-autoclose="true">
  3.     <input type="text" class="form-control" value="09:32">
  4.     <span class="input-group-addon">
  5.         <span class="glyphicon glyphicon-time"></span>
  6.     </span>
  7. </div>
  8.  
  9. <!-- Or just a input -->
  10. <input id="demo-input" />

调用函数:

  1. <script type="text/javascript">
  2.     $('.clockpicker').clockpicker()
  3.         .find('input').change(function(){
  4.             // TODO: time changed
  5.             console.log(this.value);
  6.         });
  7.     $('#demo-input').clockpicker({
  8.         autoclose: true
  9.     });
  10.  
  11.     if (something) {
  12.         // Manual operations (after clockpicker is initialized).
  13.         $('#demo-input').clockpicker('show') // Or hide, remove ...
  14.                 .clockpicker('toggleView', 'minutes');
  15.     }
  16. </script>

更多信息:https://github.com/weareoutman/clockpicker

(0)

本文由 创客云 作者:创客云 发表,转载请注明来源!

阿里云

热评文章

发表评论

嘿,欢迎咨询!