bootstrap-datetimepicker初学者经验
2016-05-19 17:21
489 查看
这款datetimepicker的确很好用,大部分内容还是参考这里:http://www.bootcss.com/p/bootstrap-datetimepicker/
但是在我的使用下仍旧发现了一些问题:
如果仅仅是照搬网站上的内容可能无法达到所需的要求,可能有的人已经解决了,我这里也只是再提一下而已。
首先这款插件在网站上所使用的案例仍旧是bootstrap2的,如果需要使用bootstrap3,可以先下载包,然后从里面的bootstrap3案例里面去参考。
查看例子的时候是不是会发现如下情况,日期的指向在了清除的按钮上,而我们更希望能放在后面显示日期的按钮上。
this.component = this.element.is('.date') ? ( this.bootcssVer == 3 ? this.element.find('.input-group-addon .glyphicon-th, .input-group-addon .glyphicon-time, .input-group-addon .glyphicon-remove, .input-group-addon .glyphicon-calendar, .input-group-addon .fa-calendar, .input-group-addon .fa-clock-o').parent() : this.element.find('.add-on .icon-th, .add-on .icon-time, .add-on .icon-calendar, .add-on .fa-calendar, .add-on .fa-clock-o').parent()) : false;
this.componentReset = this.element.is('.date') ? ( this.bootcssVer == 3 ? this.element.find('.input-group-addon .glyphicon-remove, .input-group-addon .fa-times').parent():this.element.find('.add-on .icon-remove, .add-on .fa-times').parent()) : false;
上面这段代码是刚下载下来时候的。
对这段代码进行修改可以自定义产生日期div和删除图标控件,可以看到曾经的bootstrap2是默认支持fontawesome的图标的,但是bootstrap3需要我们在这里手动添加,也可以添加其他包的图标。
例如我就在component中删除了 .input-group-addon .glyphicon-remove
控制在点击remove后不会再弹出日期控件
component中添加了
.input-group-addon .icon-calendarcomponentReset添加了
.input-group-addon .icon-remove用以支持fontawesome
效果:
//
this.fontAwesome = options.fontAwesome || this.element.data('font-awesome') || false;通过配置fontAwesome:true可以更改上方左右的箭头,但是给出的
//这部分内容是写到一半看到的。。。顺带看了一下也写上来了
接下来这个问题应该是datetimepicker的一个小bug
我设置了当天为endDate,但是却发现在月份这一项中无法选择五月,其实四月也是无法选中的
其原因是,插件是根据div中元素个数来确定的,然而div中不是只有一月到十二月这十二个元素,还有两个元素被计算进去了,就是年份边上的两个箭头。。。
这就导致了有2个月的偏差,其实这个偏差在程序中是有写的。可能只是忘了加到这里而已,如下面把offset加到endMonth上就可以了
if (year == endYear) {
months.slice(endMonth+offset).addClass('disabled');
}
以上就是本次记录~~~虽然还发现了一个问题,但是还没解决,就不写了
但是在我的使用下仍旧发现了一些问题:
如果仅仅是照搬网站上的内容可能无法达到所需的要求,可能有的人已经解决了,我这里也只是再提一下而已。
首先这款插件在网站上所使用的案例仍旧是bootstrap2的,如果需要使用bootstrap3,可以先下载包,然后从里面的bootstrap3案例里面去参考。
查看例子的时候是不是会发现如下情况,日期的指向在了清除的按钮上,而我们更希望能放在后面显示日期的按钮上。
this.component = this.element.is('.date') ? ( this.bootcssVer == 3 ? this.element.find('.input-group-addon .glyphicon-th, .input-group-addon .glyphicon-time, .input-group-addon .glyphicon-remove, .input-group-addon .glyphicon-calendar, .input-group-addon .fa-calendar, .input-group-addon .fa-clock-o').parent() : this.element.find('.add-on .icon-th, .add-on .icon-time, .add-on .icon-calendar, .add-on .fa-calendar, .add-on .fa-clock-o').parent()) : false;
this.componentReset = this.element.is('.date') ? ( this.bootcssVer == 3 ? this.element.find('.input-group-addon .glyphicon-remove, .input-group-addon .fa-times').parent():this.element.find('.add-on .icon-remove, .add-on .fa-times').parent()) : false;
上面这段代码是刚下载下来时候的。
对这段代码进行修改可以自定义产生日期div和删除图标控件,可以看到曾经的bootstrap2是默认支持fontawesome的图标的,但是bootstrap3需要我们在这里手动添加,也可以添加其他包的图标。
例如我就在component中删除了 .input-group-addon .glyphicon-remove
控制在点击remove后不会再弹出日期控件
component中添加了
.input-group-addon .icon-calendarcomponentReset添加了
.input-group-addon .icon-remove用以支持fontawesome
效果:
//
this.fontAwesome = options.fontAwesome || this.element.data('font-awesome') || false;通过配置fontAwesome:true可以更改上方左右的箭头,但是给出的
this.icons = { leftArrow: this.fontAwesome ? 'fa-arrow-left' : (this.bootcssVer === 3 ? 'glyphicon-arrow-left' : 'icon-arrow-left'), rightArrow: this.fontAwesome ? 'fa-arrow-right' : (this.bootcssVer === 3 ? 'glyphicon-arrow-right' : 'icon-arrow-right') } this.icontype = this.fontAwesome ? 'fa' : 'glyphicon';这段代码中fa-arrow-left应该不是fontawesome现在版本的东西吧可以自行修改
//这部分内容是写到一半看到的。。。顺带看了一下也写上来了
接下来这个问题应该是datetimepicker的一个小bug
我设置了当天为endDate,但是却发现在月份这一项中无法选择五月,其实四月也是无法选中的
其原因是,插件是根据div中元素个数来确定的,然而div中不是只有一月到十二月这十二个元素,还有两个元素被计算进去了,就是年份边上的两个箭头。。。
这就导致了有2个月的偏差,其实这个偏差在程序中是有写的。可能只是忘了加到这里而已,如下面把offset加到endMonth上就可以了
if (year == endYear) {
months.slice(endMonth+offset).addClass('disabled');
}
以上就是本次记录~~~虽然还发现了一个问题,但是还没解决,就不写了
相关文章推荐
- bootstrap初试进度条
- Bootstrap 3.3.4 发布,Web 前端 UI 框架
- maven使用经验集
- angular 指令简述
- 样式表CSS布局经验
- 路由器之基本维护经验
- Erlang初学:Erlang的一些特点和个人理解总结
- 学习C和C++的9点经验总结
- 非常不错的MySQL优化的8条经验
- 基于BootStrap Metronic开发框架经验小结【六】对话框及提示框的处理和优化
- Bootstrap教程JS插件弹出框学习笔记分享
- Bootstrap框架动态生成Web页面文章内目录的方法
- Bootstrap表单组件教程详解
- Bootstrap每天必学之前端开发框架
- Bootstrap 粘页脚效果
- JS组件中bootstrap multiselect两大组件较量
- Bootstrap模仿起筷首页效果
- 基于Bootstrap的网页设计实例
- 基于BootStrap Metronic开发框架经验小结【四】Bootstrap图标的提取和利用
- BootStrap实用代码片段之一