当前位置：首页 > 网页特效 > 日期和时间

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

分类：日期和时间日期：2024-05-14 点击(3) 评论(0)

演示免费下载

简介

这是一个为Bootstrap定制的时钟样式的日期时间选择插件，当然也可以单独使用jQuery来实现。

它的兼容性非常好，可兼容所用的现代浏览器，包括IE9，IE8下效果也不错。

ClockPicker最先是为Bootstrap定制的，所以使用这个插件必须引入Bootstrap。你想不使用Bootstrap，只使用jQuery也有解决方案。

.popover和.btn样式是在Bootstrap下使用的，如果只使用jQuery，要将所有的bootstrap-*改为jquery-*。

##### 使用方法
引入js和css

```html

<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css">
 

<link rel="stylesheet" type="text/css" href="dist/bootstrap-clockpicker.min.css">

<script type="text/javascript" src="assets/js/jquery.min.js"></script>
<script type="text/javascript" src="assets/js/bootstrap.min.js"></script>
 

<script type="text/javascript" src="dist/bootstrap-clockpicker.min.js"></script>
```
##### HTML结构

```html

<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" />
```
##### 调用函数

```html
<script type="text/javascript">
    $('.clockpicker').clockpicker()
        .find('input').change(function(){
            // TODO: time changed
            console.log(this.value);
        });
    $('#demo-input').clockpicker({
        autoclose: true
    });
 
    if (something) {
        // Manual operations (after clockpicker is initialized).
        $('#demo-input').clockpicker('show') // Or hide, remove ...
                .clockpicker('toggleView', 'minutes');
    }
</script>     
```

web299.com

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

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果