在ngx-bootstrap的日期选择器上分开输入和日历

• Z时代
• 2024-01-10
• 分类：问答

我想在ngx-bootstrap的日期选择器上分开输入和日历。 然后，我想将日期选择器的主体插入到特定的标记中。在ngx-bootstrap的日期选择器上分开输入和日历

所以这是我写的代码，请把你的时间来阅读它

date.component.ts

import { 
    Component, OnInit, OnDestroy, ViewChild, ComponentFactoryResolver, ViewContainerRef, Injector 
} from '@angular/core'; 
import { BsDatepickerConfig } from 'ngx-bootstrap'; 
import { BsDatepickerContainerComponent } from 'ngx-bootstrap/datepicker/themes/bs/bs-datepicker-container.component'; 
@Component({ 
    selector : 'app-date', 
    templateUrl : './date.component.html' 
}) 
export class DateComponent implements OnInit, OnDestroy { 
    factory: any; 
    injector: any; 
    config: BsDatepickerConfig; 
    instance: any; 
    @ViewChild('dp', {read: ViewContainerRef}) dp; 
    constructor(
    private resolver: ComponentFactoryResolver 
) { 
    } 
    ngOnInit() { 
    this.config = new BsDatepickerConfig(); 
    const minDate = new Date(1900, 1, 1); 
    const maxDate = new Date(); 
    maxDate.setHours(11, 59, 59, 999); 
    this.config.minDate = minDate; 
    this.config.maxDate = maxDate; 
    this.config.showWeekNumbers = false; 
    this.injector = Injector.create([{provide: BsDatepickerConfig, useValue: this.config}]); 
    this.factory = this.resolver.resolveComponentFactory(BsDatepickerContainerComponent); 
    this.instance = this.makeInstance(this.dp); 
    } 
    makeInstance(view: ViewContainerRef) { 
    view.clear(); 
    const component = this.factory.create(this.injector); 
    view.insert(component.hostView); 
    return component.instance; 
    } 
    ngOnDestroy() { 
    } 
} 

date.component.html

<div #dp></div> 

是否有任何此代码存在问题，请分享游览内容。

回答：

以上是 在ngx-bootstrap的日期选择器上分开输入和日历 的全部内容， 来源链接： utcz.com/qa/261063.html