您的位置:首页 > Web前端 > BootStrap

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可以更改上方左右的箭头,但是给出的
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');
}

以上就是本次记录~~~虽然还发现了一个问题,但是还没解决,就不写了
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息