关于在bootstrap4中使用bootstrap-datetimepicker日期插件图标不显示的问题

关于在bootstrap4中使用bootstrap-datetimepicker日期插件图标不显示的问题

    • 那么解决方法就有啦,既然插件只支持bootstrap3,2,那么我们直接使用fontAwesome 因为使用的是bootstrap4,我们直接引入[Font Awesome](http://fontawesome.dashgame.com/),在option中这样添加就ok啦
    • 效果

问题:在下图中可以看到左右箭头图标不显示
关于在bootstrap4中使用bootstrap-datetimepicker日期插件图标不显示的问题_第1张图片
查看bootstrap-datetimepicker.js源码可以看到图标的显示有这样定义

	this.language = options.language || this.element.data('date-language') || 'en';
    this.language = this.language in dates ? this.language : this.language.split('-')[0]; // fr-CA fallback to fr
    this.language = this.language in dates ? this.language : 'en';
    this.isRTL = dates[this.language].rtl || false;
    this.formatType = options.formatType || this.element.data('format-type') || 'standard';
    this.format = DPGlobal.parseFormat(options.format || this.element.data('date-format') || dates[this.language].format || DPGlobal.getDefaultFormat(this.formatType, 'input'), this.formatType);
    this.isInline = false;
    this.isVisible = false;
    this.isInput = this.element.is('input');
    this.fontAwesome = options.fontAwesome || this.element.data('font-awesome') || false;
    this.bootcssVer = options.bootcssVer || (this.isInput ? (this.element.is('.form-control') ? 3 : 2) : ( this.bootcssVer = this.element.is('.input-group') ? 3 : 2 ));
	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.fontAwesome = options.fontAwesome || this.element.data('font-awesome') || false;

那么解决方法就有啦,既然插件只支持bootstrap3,2,那么我们直接使用fontAwesome 因为使用的是bootstrap4,我们直接引入Font Awesome,在option中这样添加就ok啦

$('.form_date').datetimepicker({
            fontAwesome:'font-awesome',//指定
            language:  'zh-CN',//语言
            format: 'yyyy-mm-dd'//日期格式化
        });

效果

关于在bootstrap4中使用bootstrap-datetimepicker日期插件图标不显示的问题_第2张图片

你可能感兴趣的:(Html,Css)