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

Bootstrap谷歌Material Design风格日期时间选择器

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

简介

bootstrap-material-datetimepicker是一款基于Bootstrap的谷歌Material Design风格日期时间选择器插件。通过这个插件可以快速的构建扁平风格的日期选择器。它还带有非常炫酷的浮动标签等Material效果，非常的时尚。

##### 安装 
可以通过bower来安装该事件日期选择器。

bower install bootstrap-material-datetimepicker                
#####  使用方法
该日期时间选择器插件依赖于jQuery，momentjs和谷歌Material Icon ```html
Font：<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">。

#####  HTML结构
该日期时间选择器使用一个input元素来制作即可。

```html
<input type="text" id="date" class="form-control floating-label" placeholder="Date"> 
```               
#####  初始化插件
在页面DOM元素加载完毕之后，可以通过bootstrapMaterialDatePicker()方法来初始化该插件。

```html
$('input').bootstrapMaterialDatePicker();    
```            
#####  配置参数

| 参数| 类型| 描述| 
| ------------ | ------------ |------------ |
| format| String| MomentJS 格式| 
| shortTime| Boolean| 设置为true则显示12小时时间制| 
| minDate| String、Date、Moment | 最小可选择的日期| 
| maxDate| String、Date、Moment| 最大可选择的日期| 
| currentDate| String、Date、Moment| 初始化时间| 
| date| Boolean| 设置为true带有日期选择| 
| time| Boolean| 设置为true带有时间选择| 
| cancelText| String| “取消”按钮上的文本，默认值为“Cancel”| 
| okText| String| “确定”按钮上的文本，默认值为“OK”| 
#####  事件
```html
$('input').bootstrapMaterialDatePicker('setDate', moment());  
```              
| 事件| 参数| 描述| 
| ------------ | ------------ |------------ |
| setDate| String、Date、Moment| 设置初始日期| 
| setMinDate| String、Date、Moment| 设置最小可以选择的日期| 
| setMaxDate| String、Date、Moment| 设置最大可以选择的日期| 
| destroy| NULL| 销毁日期时间选择器对象|

web299.com

Bootstrap谷歌Material Design风格日期时间选择器

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

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

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

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