ngx-bootstrap的日期和时间选择器

ngx-bootstrap的日期和时间选择器
插件名称 ngx-bootstrap-datetime-popup
发布时间 2020年6月20日
插件作者 Gillardo

使用ngx-bootstrap库的简单日期和时间弹出选择器。

使用ngx-bootstrap库的日期和时间弹出选择器

目前这是一个非常简单的日期时间选择器,仅包含我在其中使用的项目所需的功能。很高兴添加更多功能

安装:

# Yarn
$ yarn add ngx-bootstrap-datetime-popup

# NPM
$ npm install ngx-bootstrap-datetime-popup  --save

要使用该组件,请DatetimePopupModule通过您的.ts代码导入,然后使用.forRoot()函数将其添加到模块中。您还必须导入模块datepickertimepicker并且dropdown从中导入ngx-bootstrap已使用的服务

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { DatepickerModule } from 'ngx-bootstrap/datepicker';
import { TimepickerModule } from 'ngx-bootstrap/timepicker';
import { DatetimePopupModule } from 'ngx-bootstrap-datetime-popup';

import { AppComponent } from './app.component';

@NgModule({
  imports: [
    FormsModule,
    BrowserModule,
    BrowserAnimationsModule,
    BsDropdownModule.forRoot(),
    DatepickerModule.forRoot(),
    TimepickerModule.forRoot(),
    DatetimePopupModule.forRoot()
  ],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]
})
export class AppModule {
  
}

现在,将该组件添加到您的HTML中。

<datetime-popup [(value)]="myDate"></datetime-popup>

我现在添加了代码,因此您可以更改“清除”,“现在”和“关闭”按钮上的属性。为此,您必须使用一个实现与IDatetimePopupButtonOptions接口相同的属性的对象

export interface IDatetimePopupButtonOptions {
    // 按钮应该显示出来吗
    show: boolean;

    // 应该给它什么文本标签
    label: string;

    // 要使用的css类,默认为'btn btn-sm btn-secondary'
    cssClass: string;
}

该组件接受3个输入closeButtonclearButton并且nowButton,这样你就可以绑定像这样你的选择:

<datetime-popup [(value)]="myDate" [closeButton]="myCloseOptions"></datetime-popup>

由于我不太喜欢ngx-bootstrap datePicker的样式,因此您可以像其他任何样式一样覆盖CSS,这是一个示例

此CSS还将覆盖在引导程序4中不再使用的glyphicon图标。

datetime-popup.dropdown .glyphicon {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

datetime-popup.dropdown timepicker {
    display: flex;
    justify-content: center;
}

datetime-popup.dropdown .bg-faded {
    border:0;
    background-color: #fff;
}

datetime-popup.dropdown datepicker button {
    border:0;
    background-color: #fff;
}

datetime-popup.dropdown datepicker button.active {
    background-color: #ddd;
}

datetime-popup.dropdown .glyphicon.glyphicon-remove-circle:before {
    content: "\f05c";
}

datetime-popup.dropdown .glyphicon.glyphicon-chevron-down:before {
    content: "\f078";
}

datetime-popup.dropdown .glyphicon.glyphicon-chevron-up:before {
    content: "\f077";
}

datetime-popup.dropdown .glyphicon.glyphicon-chevron-left:before {
    content: "\f053";
}

datetime-popup.dropdown .glyphicon.glyphicon-chevron-right:before {
    content: "\f054";
}

datetime-popup.dropdown .glyphicon.hidden {
    display: none !important;
}

###常见错误如果收到与此类似的错误,则是因为安装的ngx-bootstrap版本与该组件使用的版本不同。如果打开ngx-bootstrap-datetime-popup并看到一个node_modules文件夹,则可能会在其中看到一个名为ngx-bootstrap的文件夹。

ERROR Error: Uncaught (in promise): Error: StaticInjectorError(AppModule)[BsDropdownDirective -> ComponentLoaderFactory]:
StaticInjectorError(Platform: core)[BsDropdownDirective -> ComponentLoaderFactory]:
NullInjectorError: No provider for ComponentLoaderFactory!
Error: NullInjectorError: No provider for ComponentLoaderFactory!

如果您想要更多功能,请创建一个PR,因为我现在有点时间不满意。编码愉快!