日历组件

概述用法

轻松创建可以从预填充下拉菜单中选择时间的时间选择器。

将 data-toggle="datetimepicker" 属性添加到 input 元素中就能创建时间选择器。获得焦点后，时间选择器会自动显示。

禁止弹出日历组件层只需要设置input元素为disabled

* date ：

                                
                                    <input class="form-control" value="2015-05-17" type="text" data-toggle="datetimepicker" readonly="readonly">

参数配置

通过data-*配置，或jQuery插件重新绑定配置

属性	默认值	描述
`skin`	`default [blue\|green\|orange\|red]`	主题样式
`format`	`YYYY-MM-DD`	日期格式
`min`	`1900-01-01 00:00:00`	最小日期
`max`	`2099-12-31 23:59:59`	最大选择日期
`istime`	`false`	是否显示时间选择器

主题皮肤

通过data-skin配置

* 默认(default或不填) ：

* 蓝色(blue) ：

* 绿色(green) ：

* 橙色(orange) ：

* 红色(red) ：

事件监听

show.ui.datetimepicker日历显示触发
close.ui.datetimepicker日历关闭触发
choose.ui.datetimepicker日历选择后触发

$('#j-datetimepicker-8').on('show.ui.datetimepicker', function(){ alert('打开'); }) 

                                $('#j-datetimepicker-8').on('close.ui.datetimepicker', function(){ alert('关闭'); })

                                $('#j-datetimepicker-8').on('choose.ui.datetimepicker', function(){ alert('选择'); })

联动

多个日历空间联动，只需监听触发的日历控件，通过监听前一个控件的choose.ui.datetimepicker事件和后一个控件的data-min属性

开始时间:

结束时间:

$('#j-datetimepicker-11').on('choose.ui.datetimepicker', function(e, date) { 

              var curDate = date || $(this).val(); 

              $('#j-datetimepicker-12').val(curDate).data('min', curDate) 

        })