其他代码

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

也想出现在这里?联系我们
面包多

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

服务范围 1、专业提供WordPress主题、插件汉化、优化、PHP环境配置等服务请详询在线客服
2、本站承接 WordPress、DedeCMS、ThinkPHP 等系统建站、仿站、开发、定制等服务
3、英文模板(主题)安装费用为120元/次,汉化主题首次免费安装(二次安装30元/次)
售后时间 周一至周五(法定节假日除外) 10:00-22:00
免责声明 本站所提供的模板(主题/插件)等资源仅供学习交流,若使用商业用途,请购买正版授权,否则产生的一切后果将由下载用户自行承担,有部分资源为网上收集或仿制而来,若模板侵犯了您的合法权益,请来信通知我们(Email: 2107117185@qq.com),我们会及时删除,给您带来的不便,我们深表歉意!
也想出现在这里?联系我们
360uxc
免费下载
(0)

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

也想出现在这里?联系我们
创客主机

热评文章

发表评论

精彩推荐

Tabula - 艺术音乐外语培训学校网站WordPress模板

Envato Affiliates

本站承接 WordPress / DedeCMS / ThinkPHP 等
系统建站、仿站、开发、定制等业务!

Hi, 如果您有主题插件代购汉化等建站相关业务,可以 跟我联系 哦!
欢迎投稿
嘿,欢迎咨询!