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

当前位置:主页 > jQuery库 > 日期时间选择器 > Bootstrap谷歌Material Design风格日期时间选择器
Bootstrap谷歌Material Design风格日期时间选择器
分享:

    插件介绍

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

    浏览器兼容性

    浏览器兼容性
    时间:08-23
    阅读:
简要教程

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

安装

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

bower install bootstrap-material-datetimepicker                
              

使用方法

该日期时间选择器插件依赖于jQuerymomentjs和谷歌Material Icon Font:<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

HTML结构

该日期时间选择器使用一个<input>元素来制作即可。

<input type="text" id="date" class="form-control floating-label" placeholder="Date">                
              
初始化插件

在页面DOM元素加载完毕之后,可以通过bootstrapMaterialDatePicker()方法来初始化该插件。

$('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”

事件

 $('input').bootstrapMaterialDatePicker('setDate', moment());                
              
事件 参数 描述
setDate String|Date|Moment 设置初始日期
setMinDate String|Date|Moment 设置最小可以选择的日期
setMaxDate String|Date|Moment 设置最大可以选择的日期
destroy NULL 销毁日期时间选择器对象