jQuery时钟风格插件clockpicker

所属分类:输入-日期和时间

 25527  58  查看评论 (8)
jQuery时钟风格插件clockpicker ie兼容8

浏览器支持

所有的主流浏览器都支持,包括IE 9 +。其它外观和行为不够好,在IE 8。


设备支持

台式机和移动设备的支持。它也可以在大触摸屏设备。


依赖关系

依赖jQuery。


用法

<!-- 引导样式表 -->
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css">
<!-- ClockPicker样式表 -->
<link rel="stylesheet" type="text/css" href="dist/bootstrap-clockpicker.min.css">
<!-- 输入组,只需添加类“clockpicker',和可选的数据 -->
<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>
<!-- 或者只是一个输入 -->
<input id="demo-input" />
<!-- jQuery和引导脚本 -->
<script type="text/javascript" src="assets/js/jquery.min.js"></script>
<script type="text/javascript" src="assets/js/bootstrap.min.js"></script>
<!-- ClockPicker脚本 -->
<script type="text/javascript" src="dist/bootstrap-clockpicker.min.js"></script>
<script type="text/javascript">
$('.clockpicker').clockpicker()
    .find('input').change(function(){
        // TODO:时间改变
        console.log(this.value);
    });
$('#demo-input').clockpicker({
    autoclose: true
});
if (something) {
    // 手动操作(clockpicker初始化之后)
    $('#demo-input').clockpicker('show') //或者隐藏,删除...
            .clockpicker('toggleView', 'minutes');
}
</script>
相关插件-日期和时间

简单的倒计时

这是一个实用的倒计时插件,希望大家喜欢。
  日期和时间
 6065  14

html+css+js 动态时钟

就是用纯html+js+css写的一个动态时钟
  日期和时间
 11565  83

jQuery多功能秒表闹钟计时器插件

jQuery多功能秒表闹钟计时器插件
  日期和时间
 19224  43
  日期和时间
 14154  53

讨论这个项目(8)回答他人问题或分享插件使用方法奖励jQ币

    ●╊● 0
    2018/1/2 15:19:57
    ╃ 伊人未归 ┽ 0
    2017/3/23 11:51:10

    要引用太多文件了

    回复
    画满 0
    2016/11/14 13:11:24
    不过,好像ie8中显示样式上有点问题,钟摆的那个显示不出来,就只能显示时钟数字。。。 回复
    画满 0
    2016/11/14 13:11:48
    这个好,眼前一亮,好评好评 回复
    破碎の眸光 0
    2016/10/13 11:10:54
    单车 0
    2016/10/12 9:10:50
    怎么隐藏分钟部分 回复
    小鸭 0
    2016/1/7 12:01:32
    不能收藏?
        西瓜0
        2016/1/21 16:01:42

        可以收藏,右上作者下有个心。

    回复
取消回复